Bootstrap 3中的sr-only是什么？

我在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类隐藏除了一个元件的所有设备screen readers:

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

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

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

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

更新2019：

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

根据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可访问性文档

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

Additionally, if a DOM element has a width and height of 0, the element is not seen by the DOM. This is why the above CSS uses width: 1px; height: 1px;. By using display: none and setting your CSS to height: 0 and width: 0, the element is not seen by the DOM and is thus problematic. The above CSS using width: 1px; height: 1px; is not all you do to make the content invisible to desktop and mobile browsers (without overflow: hidden, your content would still show on the screen), and visible to screen readers. Hiding the content from desktop and mobile browsers is done by adding an offset from width: 1px and height: 1px previously mentioned by using:

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

Lastly, to have a very good idea of what a screen reader sees and relays to its impaired user, turn off page styling for your browser. For Firefox, you can do this by going to:

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将在所有其他设备上显示，在文本阅读器上显示错误：字样。