What is sr-only in Bootstrap 3?

<ul class="nav">

  <li><a>Default</a></li>

  <li><a>Static top</a></li>

  <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>

</ul>

You see which one is selected (sr-only part is hidden):

-Default
-Static top
-Fixed top
You hear which one is selected if you use screen reader:

-Default
-Static top
-Fixed top (current)
As a result of this technique blind people supposed to navigate easier on your website.

4 years ago

Ensures that the object is displayed (or should be) only to readers and similar devices. It give more sense in context with other element with attribute aria-hidden="true".

<div class="alert alert-danger" role="alert">

  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>

  <span class="sr-only">Error:</span>

  Enter a valid email address

</div>

Glyphicon will be displayed on all other devices, word Error: on text readers.

4 years ago

The .sr-only class hides an element to all devices except screen readers:

Skip to main content Combine .sr-only with .sr-only-focusable to show the element again when it is focused

.sr-only {

border: 0 !important;

clip: rect(1px, 1px, 1px, 1px) !important; / 1 */

-webkit-clip-path: inset(50%) !important;

    clip-path: inset(50%) !important;  /* 2 */

height: 1px !important;

margin: -1px !important;

overflow: hidden !important;

padding: 0 !important;

position: absolute !important;

width: 1px !important;

white-space: nowrap !important;            /* 3 /

}

4 years ago

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.

4 years ago