Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

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>
by

4 Answers

aashaykumar

<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.
kshitijrana14
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.
pankajshivnani123
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
/
}
sandhya6gczb
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.

Login / Signup to Answer the Question.