Screen Reader Only Text

Cormac Chisholm(opens in a new Tab)

Aug 22nd, 2022

·

1 min read

At this point we are well aware that screen readers are a crucial tool for users that are vision impaired, illiterate or have a learning disability.

Screen readers convert the content of your site to audio in the form of synthetic speech (not to disimilar to Alexa or Siri).

So, we may look to add content specifically to enhance the experience for screen reader users.

A simple way to achieve this is to simply add the content you want to be read by screen readers and wrapping in a parent element with a .sr-only class.

Link to this headingHow to use it

To hide elements on all devices except screen readers:

1. Add the following class to your css

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

2. Apply that class to the parent element of your content

<span class="sr-only">Screen reader only content</span>

That's it.