When using accessibility tools in the Studio, you can “hide” text from screen readers. If text is hidden from a screen reader, it won’t be read out to users who are leveraging accessibility tools. This can be important if you have text within an experience that would be repetitive or unnecessary if read out loud. Let’s take a look at a few examples:
In this example, our “Learn More” button has an Aria-Label applied to it that tells the user that they can click on this button to learn more about the topic. Additionally, there is a text layer within the button that says “Learn More". So instead of a screen reader reading the Aria-Label applied to the "Learn More" button in addition to the "Learn More" text layer itself, we can hide the “Learn More” text layer within the button from screen readers, as it feels a little repetitive and unnecessary after the Aria-Label applied to the button is read.
A similar example is this carousel here. Each hotspot has an Aria-Label telling the user that they can click on the hotspot to cycle to the next or previous slide in the carousel, but the designer has also included some instructional text below the carousel indicating to the user that they can “click on an image or use the arrow buttons to learn more". When the screen reader reads out the carousel, we only want it to read out the Aria-Labels on the hotspots, as it could be confusing for the user if they navigate through the carousel and then the instructional text is read out afterward. So in this case, we can hide the instructional text layer from screen readers.
To hide the text from screen readers:
Select the text layer you’d like to hide
Navigate to your Design tab on the right and scroll down beyond the Typography settings
Beneath the Aria-Label section, check the box that says Hide from Screen Readers
That’s it! Now, that text will not be read out by screen readers and will solely exist on the canvas from a visual perspective.