What is sr-only in Bootstrap 3?

Question

What is the class sr-only used for? Is it important or can I remove it? Works fine without.

Here's my example:

<div class="btn-group">     <button type="button" class="btn btn-info btn-md">Departments</button>     <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">     <span class="caret"></span>     <span class="sr-only">Toggle Dropdown</span>     </button>     <ul class="dropdown-menu" role="menu">         <li><a href="#">Sales</a></li>         <li><a href="#">Technical</a></li>         <li class="divider"></li>         <li><a href="#">Show all</a></li>     </ul> </div> 

Answer 1

According to bootstrap's documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

Here is an example styling used:

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

Is it important or can I remove it? Works fine without.

It's important, don't remove it.

You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn't see a visual difference.

If you're interested in reading about accessibility:

• Web Accessibility Initiative (WAI)

• MDN Accessibility documentation

Answer 2

As JoshC said, the class .sr-only is used to visually hide the information used for screen readers only. But not only to hide labels. You might consider hiding various other elements such as "skip to main content" link, icons which have an alternative texts etc.

BTW. you can also use .sr-only sr-only-focusable if you need the element to become visible when focused e.g. "skip to main content"

If you want make your website even more accessible I recommend to start here:

• Accessibility @Google - Web Fundamentals
• Accessibility Developer Guide (my personal favorite)
• WebAIM Principles + WebAIM WCAG Checklist
• Accessibility @ReactJS (lots of good resources and general stuff)

Why?

According to the World Health Organization, 285 million people have vision impairments. So making a website accessible is important.

IMPORTANT: Avoid treating disabled users differently. Generally speaking try to avoid developing a different content for different groups of users. Instead try to make accessible the existing content so that it simply works out-of-the-box and for all not specifically targeting e.g. screen readers. In other words don't try to reinvent the wheel. Otherwise the resulting accessibility will often be worse than if there was nothing developed at all. We developers should not assume how those users will use our website. So be very careful when you need to develop such solutions. Obviously a "skip link" is a good example of such content if it's made visible when focused. But there many bad examples too. Such would be hiding from a screen reader a "zoom" button on the map assuming that it has no relevance to blind users. But surprisingly, a zoom function indeed is used among blind users! They like to download images like many other users do (even in high resolution), for sending them to somebody else or for using them in some other context. Source - Read more @ADG: Bad ARIA practices