When using accessibility tools in Ceros, you have the ability to actually “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 box within the button that says “Learn More.” So instead of a screen reader reading the aria label and the text box “Click on this button to learn more about xyz” + “learn more,” we can hide the “learn more” text within the button from screen readers, as it feels a little repetitive and unnecessary after the aria label 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 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 after they navigate through the carousel and then the instructional text is read out afterwards. So in this case we can hide the instructional text from screen readers.
To hide the text from screen readers:
- Select the text box you’d like to hide
- Navigate to your design tab on the right and scroll down to Typography
- 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.
Was this helpful?