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>

---

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

---

As JoshC said, the class is used to hide information used for screen readers. But not only to hide labels, you might consider to hide from sighted user an internal link "skip to main content" which is desirable for blind users if you have a complex navigation or adds in the page header before the content. They would need to press arrow down key for too many times to reach it by screen reader.

If you want your site to interact even more with screen readers, use W3C standardized ARIA attributes and I definitely recommend to visit the Google online course, which will take only up to 1-2h or at least watch a Google's 40min video.

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

---

I found this in the navbar example, and simplified it.

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

链接地址: http://www.djcxy.com/p/13250.html

上一篇: 与Bootstrap 3一致

下一篇: 只在Bootstrap 3中？