Enable

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.

Example 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 makes 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 a 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 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.

Further Reading