什么是Bootstrap 3中的sr-only？

sr-only类是用来做什么的？它是否重要，或者我可以删除它？没有它也能正常工作。

这是我的例子。

<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>
bzeaman
已编辑的问题 16日 八月 2016 в 9:01
编程
html css twitter-bootstrap-3 twitter-bootstrap
3日 十一月 2013 в 9:51
36 种观点
解决办法

根据bootstrap'的文档，该类是用来从渲染的页面布局中隐藏只为屏幕阅读器准备的信息。

如果你不给每个输入都加上一个标签，那么屏幕阅读器就会对你的表单产生困扰。对于这些内联表单，你可以使用.sr-only类来隐藏标签。

这里有一个[例子][2]使用的样式。

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

这很重要吗，或者我可以删除它吗？没有它也能正常工作。

它很重要，不要删除它。

你应该始终考虑屏幕阅读器的可访问性。无论如何，使用该类会隐藏该元素，因此你不应该看到视觉上的差异。

如果你有兴趣阅读关于可访问性的文章。

Pro Q
编辑本段答案2日 五月 2019 в 9:28
评论(9)

正如JoshC所说，这个类是用来隐藏屏幕阅读器的信息的。但不仅仅是隐藏标签，你也可以考虑向盲人用户隐藏一个内部链接"跳到主内容"，如果你在主内容之前有一个复杂的导航或广告，这对盲人用户来说是可取的。

如果你想让你的网站与屏幕阅读器有更多的互动，可以使用 W3C标准化的ARIA属性，我绝对推荐访问 Google在线课程，这只需要1-2小时，或者至少看一下 至少看一下[Google'的40分钟视频][2]。

根据世界卫生组织的统计，有2.85亿人有视力障碍。因此，使一个网站无障碍是很重要的。

2019年更新。

作为开发者，我们应该制作无障碍的内容，简单地适用于所有开箱即用的内容，而不是专门针对屏幕阅读器。这并不总是可能的，但要小心使用ARIA和"屏幕阅读器专用" 调整。如果你不完全了解它，就不要这样做。不正确的实施可能比不使用它要糟糕得多。请阅读关于ARIA坏例子的可访问性-开发者指南。在那里你也可以找到完全无障碍的组件/小工具，它们不需要任何 "仅限屏幕阅读器 "的干预。

Hrvoje Golcic
编辑本段答案20日 十一月 2019 в 8:16
评论(1)

我在navbar范例中发现了这一点，并将其简化。

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><a>Fixed top <span class="sr-only">(current)</span></a></li>
</ul>

你可以看到哪一个被选中（sr-only部分被隐藏）。

  • 默认的
  • 静态顶部
  • 固定的顶部

如果你使用屏幕阅读器，你会听到哪一个被选中。

  • 默认的
  • 静态顶部
  • 固定顶部(当前)

由于这种技术，盲人应该更容易在你的网站上导航。

评论(3)

.sr-only是一个专门用于屏幕阅读器的类名，你可以使用任何类名，但.sr-only是很常用的。 你可以使用任何类名，但.sr-only是很常用的。 如果你不关心开发时的合规性，那么可以将其删除。 如果删除的话，不会对UI造成任何影响，因为这个类的CSS在桌面和移动设备浏览器中是不可见的。

关于.sr-only的使用，这里似乎缺少一些信息来解释它的目的和是为屏幕阅读器服务的。 首先，非常重要的一点是，要时刻牢记受损用户。 受损是508合规的目的。 https://www.section508.gov/，bootstrap考虑到了这一点，这是非常好的。 然而，使用.sr-only并不是508合规性需要考虑的全部。 你还有颜色的使用，字体的大小，通过导航的无障碍性，描述符，咏叹调的使用等等。

但是对于.sr-only--CSS到底是做什么的呢？ .sr-only的CSS有几个稍微不同的变体。 下面是我使用的几个变体之一。

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

上面的CSS在桌面和移动浏览器中隐藏了用这个类包装的内容，但被JAWS等屏幕阅读器看到。 http://www.freedomscientific.com/Products/Blindness/JAWS. 标记示例如下。

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

另外，如果一个DOM元素的宽度和高度都为0，那么这个元素就不会被DOM看到。 这就是为什么上面的CSS使用width: 1px; height: 1px;。 通过使用display: none"，并将CSS设置为 "height: 0 "和 "width: 1px;"。 0和width: 0"，该元素就不会被DOM看到，从而出现问题。 上述CSS使用width: 1px; 高度：1px; "的CSS并不是所有的元素都能被DOM看到，因此存在问题。 1px;并不是让内容在桌面和手机浏览器上看不到的全部（如果没有overflow: hidden，你的内容仍然会显示在屏幕上），而屏幕阅读器则可以看到。 将内容从桌面和移动浏览器中隐藏起来是通过在width: 1px和height: 1px`的偏移量来实现。

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

最后，为了能很好地了解屏幕阅读器看到了什么，并将其转达给受损的用户，请关闭你的浏览器的页面样式。 对于Firefox来说，你可以通过以下方式进行关闭。

View > Page Style > No Style

我希望我在这里提供的信息，除了其他的回答之外，还能对某人有进一步的帮助。

Pegues
编辑本段答案9日 三月 2017 в 1:04
评论(0)

确保对象只显示（或应该显示）给读者和类似设备。 它与其他带有 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，在文本阅读器上将显示Error:字。

评论(1)

.sr-only类对除`屏幕阅读器'以外的所有设备隐藏一个元素。

跳到主要内容 将.sr-only与.sr-only-focusable结合起来，在元素被聚焦时再次显示。

Anzil khaN
编辑本段答案16日 三月 2018 в 8:10
评论(0)