What is sr-only in Bootstrap 3?

html

accessibility

aria

screen-reader

byAlex Kataev·Sep 5, 2024

The .sr-only class in Bootstrap 3 is a utility class designed to make specific elements visually hidden but accessible for screen readers. Its primary objective is to maintain accessibility for users with visual impairments, while keeping the web layout clean and aesthetically pleasing. Check out this example:

<label class="sr-only" for="inputField">Email:</label>
<input type="text" id="inputField" placeholder="Enter your email">

The label in this code is hidden on the screen but becomes audible when processed by screen readers, thus making the web experience smoother for visually impaired users.

The .sr-only class accentuates the accessibility of your website. Here's how you can level up your web standards with it:

Adheres to legal accessibility standards: .sr-only can help your website comply with legal requirements for accessibility, such as Section 508 standards in the U.S, thereby promoting equal access to information and functionality for all.
Enhances screen reader navigation: The .sr-only class offers additional contextual information for elements like navigation menus or form controls, thus enabling users who rely on assistive technologies to navigate the site with ease.
Promotes inclusive design: Deploying .sr-only together with visible indicators, ensures that your application is accessible to everyone, regardless of physical abilities.

Expanding .sr-only with ARIA roles and properties can markedly enhance the accessibility of your website. However, it's of paramount importance to adhere to the WAI-ARIA guidelines to avoid inadvertent accessibility harms.

Here's an example with a dash of humor thrown in:

<!-- I'm invisible to the eye, but not to the ear. -->
<div role="alert" class="sr-only">
  Beware! Invisible alert ahead.
</div>

The above code shows how an ARIA role can make .sr-only more powerful, assisting users who rely on screen readers.

To optimize your websites for all users, the .sr-only class can be the magic wand you need. And here's why:

Marrying accessibility with aesthetics: The .sr-only class allows developers to strike the perfect balance between content visibility and accessibility, ensuring that every user's experience, irrespective of their capabilities, is top-notch.
Boosting screen reader navigation: This utility class can help users relying on screen readers to navigate through dense elements like dropdown menus or inline forms seamlessly. Your visually impaired users will thank you for this!
Keeping semantics and presentation distinct: With .sr-only, you can provide essential information to your users without disrupting the site's layout or aesthetics. It's like getting the best of both worlds - visually compelling and functionally effective.