Skip to main contentSkip to site search
Honeycomb

Screen reader text

"Screen reader text" (aka: sr-only) is text that is visually hidden but added to the document to provide to screen reader users more context about certain controls.

For example, a button to select a trip has only the text "Continue", so to make it clear that a button related to a specific trip you may add the trip details as screen reader only text:

<button type="button" class="flix-btn flix-btn--secondary">
  <span>Continue</span>
  <span class="flix-sr-only">trip to Berlin, at 17:30 for 45 euros.</span>
</button>

Some other examples:

  • Hiding icon labels on smaller screens, instead of using "display: none" (which hides the content completely, even for screen readers);
  • Headings that were added specifically to help screen reader users, since many screen reader users use headings to scan the page to find the area they are most interested in. Unfortunately, it might not always make sense to start each section of the page with a visual heading, so you could instead make those headings screen reader only as a compromise;

sr-only versus aria-label

The usage of screen reader only text instead of an aria-label will depend on the feature you are developing and your constraints.

  • "sr-only" text adds context while "aria-label" replaces it completely;
  • "sr-only" text can be added anywhere necessary while "aria-label" can only be applied to certain elements;
  • "sr-only" is much more likely to be supported by a wider range of old school browsers and screen readers while "aria-label" has a narrower support range;

Testing

In any case, if you are not used to testing with accessibility in mind both approaches may post a threat since they are harder to test than regular test. If a bug happens and the content is not visible it may go unfixed for much longer, so make sure to add proper tests to your content. Always test your application using a screen reader to make sure your content is coherent.

Jest-dom has a couple of matchers to cover these cases - toHaveAccessibleName and toHaveAccessibleDescription.