If you’re new to the Bootstrap framework, you’ve probably come across a DOM element or two with the sr-only utility class applied to them.
What is this utility class for? And do you really need it on your website?
The sr-only utility class is a web accessibility feature of Bootstrap. It’s for DOM elements that you only want to show on screen readers.
Screen readers, if this is the first time you’ve heard the term, are assistive technologies for people with visual impairments. They include apps that read the content of web pages aloud, as well as devices with Braille displays.
(To learn more about screen readers and how they work, head on over to the website of the American Foundation for the Blind.)
Do You Really Need It?
When designing and developing your website, it is important to make sure that it doesn’t present barriers to Internet users who can’t see (or whose vision is impaired), and who rely on screen readers to use the Internet.
To the question “Should you leave the sr-only utility class?” there is a simple answer: a resounding “yes.”
If you build your website with Bootstrap, you should make it as accessible as possible for visually impaired readers by making the most of the sr-only utility class.
How to Use It
Suppose your website has an image for a logo.
To make your website’s header more accessible to visually impaired users, you will want to add an <h1> heading for its name and make it visible only to screen readers by giving it the sr-only utility class:
<div>
<img id="logo" src="/logo.svg" />
<h1 class="sr-only">Site Name</h1>
</div>In your navigation menus, you can also create special links for visually-impaired users, like links that enable them to skip to the main content of a page:
<a href="#main-content" class="sr-only">Skip to main content</a>Here’s where to learn more on the subject: