What is sr-only in Bootstrap 3?

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>

solution

According to bootstrap’s documentation, the class is used to hide information used for screen readers.

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 the styling used: (example)

.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