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

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

重要的是，请勿删除它。

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

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

• 网络无障碍倡议（WAI）

• MDN可访问性文档

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

如果您希望您的网站与屏幕阅读器进行更多互动，请使用W3C标准化的ARIA属性，我绝对建议您访问Google在线课程，该课程最多需要1-2 小时，或者至少观看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部分已隐藏）：

• 默认
• 静态顶
• 固定顶

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

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

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

.sr-only是专门用于屏幕阅读器的类名。您可以使用任何类名，但是.sr-only很常用。如果您不关心遵循合规性进行开发，则可以将其删除。如果将其删除，则不会以任何方式影响UI，因为此类的CSS对台式机和移动设备浏览器不可见。

这里似乎缺少一些有关使用.sr-only来解释其目的以及供屏幕阅读器使用的信息。首先，最重要的是始终牢记受损用户。减损是508合规性的目的：https : //www.section508.gov/，并且引导程序考虑到这一点非常好。但是，.sr-only对于508合规性，并不需要考虑全部使用。您可以使用颜色，字体大小，通过导航的可访问性，描述符，使用aria等等。

但是至于.sr-only-CSS实际上是做什么的？用于的CSS有几种略有不同的变体.sr-only。下面是我使用的少数几个之一：

.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: noneCSS并将其设置为height: 0和width: 0，DOM不会看到该元素，因此会出现问题。上面的CSS使用width: 1px; height: 1px;并不是使内容对于台式机和移动浏览器不可见的全部操作（没有overflow: hidden，您的内容仍将显示在屏幕上）并且对屏幕阅读器可见。隐藏从台式和移动浏览器的内容是通过添加来自偏移完成width: 1px并height: 1px通过使用前面提到的：

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

最后，要想很好地了解屏幕阅读器会看到什么并将其中继给有缺陷的用户，请关闭浏览器的页面样式。对于Firefox，您可以执行以下操作：

View > Page Style > No Style

希望我在此提供的信息除了其他答复外，还对某人有用。

确保对象仅（或应该）显示给阅读器和类似设备。与具有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将在所有其他设备上显示，在文本阅读器上显示错误：字样。

的.sr-only类隐藏除了一个元件的所有设备screen readers:

跳到主要内容将.sr-only与.sr-only-focusable结合使用可在元素聚焦时再次显示该元素