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:

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:

☜ Scroll to read full source ☞


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