When designing for accessibility in Studio, it’s important to take note of the layout of your assets on the canvas, as this will impact the order in which a screen reader reads out the experience. When you select an asset, you’ll see that each asset on your canvas will have a blue bounding box around it.
A screen reader is going to use these bounding boxes to determine the order it will read the content out loud. The screen reader will navigate the experience and read out each asset based on the topmost part of the bounding box, from the top down and left to right.
If you’d like more control over the order in which your content is being read out, you can group assets to have them in the same bounding box. This will ensure that those assets are read out together. So, for example, if you group a few different text boxes, they will have the same larger bounding box. When a screen reader hits that bounding box, it will read out everything grouped in that bounding box from the top down and left to right.
So in the screenshot above, you’ll see the 4 text bubbles have been grouped. So a screen reader would read all of those assets first from the top down and left to right (Layout, Header, HTML, SEO), before then reading out the computer image last, as the computer is not within the group and has a lower bounding box on the canvas.