确保对象仅向读取器和类似设备显示（或应该显示）。它在具有属性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>

Glyph图标将显示在所有其他设备上，文本阅读器上显示单词错误：。

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

它重要吗？我可以删除它吗？如果没有，工作正常。

重要的是，不要删除它。

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

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

Web无障碍倡议（WAI）MDN辅助功能文档

正如JoshC所说，class.sr仅用于在视觉上隐藏仅用于屏幕阅读器的信息。但不仅仅是为了隐藏标签。您可能会考虑隐藏各种其他元素，如“跳转到主要内容”链接、具有替代文本的图标等。

顺便说一下，如果您需要元素在聚焦时变得可见，例如“跳到主要内容”，您也可以使用.sr only sr only focusable

如果你想让你的网站更容易访问，我建议从这里开始：

可访问性@Google-Web基础辅助功能开发人员指南（我个人最爱）WebAIM原则+WebAIM WCAG清单可访问性@ReactJS（很多好的资源和一般的东西）

Why?

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

重要事项：避免区别对待残疾用户。一般来说，尽量避免为不同的用户群体开发不同的内容。相反，尝试使现有内容易于访问，这样它就可以开箱即用，并且适用于所有不专门针对屏幕阅读器的用户。换句话说，不要试图重新发明轮子。否则，所产生的可访问性通常会比根本没有开发的情况更差。我们开发者不应该假设这些用户将如何使用我们的网站。所以，当你需要开发这样的解决方案时，要非常小心。显然，“跳过链接”是此类内容的一个很好的例子，如果它在聚焦时可见。但也有很多坏例子。这将是在地图上向屏幕阅读器隐藏一个“缩放”按钮，假设它与盲人用户无关。但令人惊讶的是，在盲人用户中确实使用了缩放功能！他们喜欢像许多其他用户一样下载图像（即使是高分辨率），以便将它们发送给其他人或在其他环境中使用它们。来源-阅读更多@ADG：不良ARIA实践

我在导航栏示例中发现了这一点，并对其进行了简化。

<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部分隐藏）：

违约静态顶部固定顶部

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

违约静态顶部固定顶部（当前）

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

.sr only是专门用于屏幕阅读器的类名。您可以使用任何类名，但.sr非常常用。如果您不关心在开发时考虑到合规性，那么可以删除它。如果删除，它将不会以任何方式影响UI，因为桌面和移动设备浏览器无法看到该类的CSS。

这里似乎缺少了一些关于.sr的信息，只是为了解释它的用途和屏幕阅读器。首先，始终记住受损用户是非常重要的。减值是508合规的目的：https://www.section508.gov/，而bootstrap将这一点考虑在内是很好的。然而，仅使用.sr并不是508法规遵从性需要考虑的全部内容。您可以使用颜色、字体大小、导航的可访问性、描述符、咏叹调的使用等等。

但对于.sr，CSS实际上做什么？只有.sr使用的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使用宽度：1px；高度：1px；。通过使用display:none并将CSS设置为height:0和width:0，DOM看不到元素，因此存在问题。上面的CSS使用宽度：1px；高度：1px；这并不是你所做的一切，让桌面和移动浏览器看不到内容（没有溢出：隐藏，你的内容仍然会显示在屏幕上），让屏幕读者看到。在桌面和移动浏览器中隐藏内容是通过使用以下方法添加与前面提到的宽度：1px和高度：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>

Glyph图标将显示在所有其他设备上，文本阅读器上显示单词错误：。