Screen Reader Only Text

Screen reader only text (also known as visually hidden text) is text that cannot be seen visually but can be read by screen readers. It's used to give extra information to screen readers users when they need extra information that isn't in the visual text on the screen.

Examples of when we need to use screen reader only text include:

• Instructions on how to use a widget that is only needed for screen reader users. For example, in our pagination table demo, which shows only 10 rows of data at a time, we hide the instructions that non-sighted users will find useful (i.e. "The buttons inside this control allow you to paginate through the data in the table below, 10 columns at a time.") using an aria-describedby that points to screen reader only text.
• Announcing changes to the page that screen readers users may not see. For example, in our Wiktionary lookup demo, we use screen reader only text inside of an ARIA-live region to announce when a lookup is successful or not.
• Hiding fieldset legends visually. While you could do the same thing with an aria-label inside a group, using a legend is better due to the First Rule of ARIA.
• Exposing visually styled information, like strikethrough text to screen reader users. Our product tile demo shows how we use screen reader only text to do this.
• Visually hiding headings that are only helpful to screen reader users. The article Adding visually hidden headings to complete a page's outline from Accessibility Developer Guide talks about this in depth.
• Text read in your screen reader's reading mode (i.e. using it to read the page, not for reading out the interactive elements that have focus), screen reader only text is guaranteed to work. ARIA labels might not be read in the reading mode of your screen reader.

The question you really should ask yourself is: "Would the text I am hiding benefit all users?" If the answer is yes, don't hide the text (you'd be surprised what useful text is visually hidden by developers). If it doesn't need to be hidden ... consider not hiding it!

Show Me The CSS That I Can Use To Make Screen Reader Only Text

There have been many variations of the CSS that make up our sr-only class in Enable, the earliest reference of which seems to come from Hiding Content for Accessibility by Jonathan Snook (or, at least, there earliest reference I have found that combines a few techniques that eventually became the sr-only class we see being used in the wild today). Enable uses the following in our sr-only class, based on the gist Improved .sr-only by Codepen user ffoodd:

When Should I Use ARIA Labels Instead?

1. When giving an accessible name or label to a group of elements (using the group role) or a landmark. A good example is in step #4 of the code walkthrough for the explanation of what makes the Enable Hamburger Menu accessible.
2. To update the semantic meaning of an element coded with an ARIA role attribute, such as step #1 of Enable ARIA progress bar example.
3. When an accessible label is missing from a control. For example, if you have a button that is just a background image or an icon font (you could use screen reader only text for this too, but all modern screen readers can understand ARIA labels on interactive elements).

Be very careful putting ARIA-labels on a div or span tag. Sometimes, screen readers like Voiceover will think that those tags with an aria-label imply that the items inside are a group of interactive elements. Your mileage may vary.

What To Remember When Using Screen Reader Only Text Or Aria-Labels In Production

1. If you are using a content management system (CMS), you should remember that you must make screen reader only text and any aria-labels authorable. I advise always having a default value for these items in case someone forgets to author them, or better still, make them mandatory for authors to fill out in the CMS (since screen reader only text and aria-labels are sometimes forgotten by content authors). This is really important when you have a multilingual website, since hard-coding screen reader only text and aria-labels will result in that text not being understood by users who don't know the language that hard-coded text is written in.
2. If you are using a third-party like MotionPoint to do your translation, you will want to make sure their service logs the translation of screen reader only text, aria-labels, and image alt text.
3. You should always use screen reader only text and aria-labels as a last resort. If there is any visual text that can be used instead, use aria-labelledby to point to that content instead of using an aria-label. This is to ensure the screen reader user experience is as close to the visual experience as much as possible.

Further Reading

• Should I use an aria-label or screen-reader only text? by Oliver Langmo
• Invisible Content Just for Screen Reader Users from WebAIM
• Why and How the Bootstrap sr-only Class is Used which explains how this CSS class is used in Bootstrap