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>

答案

根据bootstrap 的文档，该类用于从呈现的页面的布局中隐藏仅用于屏幕阅读器的信息。

如果您没有为每个输入都添加标签，那么屏幕阅读器将对您的表单造成麻烦。对于这些内联表单，您可以使用. sr-only 类隐藏标签。

这是使用的示例样式：

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

是重要的还是我可以删除它？工作正常，没有。

重要的是，请勿删除它。

您应该始终将屏幕阅读器用于辅助功能。使用该类无论如何都会隐藏该元素，因此您不应看到视觉上的差异。

如果您有兴趣阅读有关可访问性的信息：

正如 JoshC 所说，该类用于隐藏用于屏幕阅读器的信息。但是，不仅要隐藏标签，您还可以考虑向视力不佳的用户隐藏 “跳至主要内容” 的内部链接，如果您在主要内容之前有复杂的导航或广告，这对于盲人用户来说是理想的。

如果您希望您的网站与屏幕阅读器进行更多互动，请使用 W3C 标准化的 ARIA 属性，我绝对建议您访问Google 在线课程，该课程最多需要 1-2h 或至少观看Google 的 40 分钟视频。

根据世界卫生组织的数据，2.85 亿人有视力障碍。因此，使网站可访问性很重要。

更新 2019：

作为开发人员，我们应该提供仅适用于所有现成而不是专门针对屏幕阅读器的可访问内容。这并非总是可能的，但请谨慎使用 ARIA 和 “仅限屏幕阅读器” 调整 。如果您不完全了解它，请不要这样做。错误的实现可能比不使用它更糟糕。请阅读有关 ARIA 错误示例的 accessibility-developer-guide 。在这里，您将找到不需要任何 “仅屏幕阅读器” 干预的完全可访问的组件 / 小部件。

我在navbar 示例中找到了它，并对其进行了简化。

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

您会看到选择了哪一个（隐藏了sr-only部分）：

默认
静态顶
固定顶

如果使用屏幕阅读器，则会听到选择了哪个选项：

默认
静态顶
固定顶（当前）

由于这项技术的存在，盲人本可以更轻松地在您的网站上导航。