Bootstrap 3 中的 sr-only 是什么？

根据 bootstrap's documentation，该类用于从呈现页面的布局中隐藏仅用于 screen readers 的信息。

如果您没有为每个输入添加标签，屏幕阅读器将无法处理您的表单。对于这些内联表单，您可以使用 .sr-only 类隐藏标签。

这是使用的 example 样式：

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

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

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

无障碍 @Google - 网络基础

无障碍开发者指南（我个人最喜欢的）

WebAIM 原则 + WebAIM WCAG 清单

可访问性@ReactJS（很多好的资源和一般的东西）

为什么？

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

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

---

我在 navbar example 中找到了这一点，并对其进行了简化。

<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/，引导程序考虑到这一点非常好。但是，对于 508 合规性，使用 .sr-only 并不是所有需要考虑的因素。您可以使用颜色、字体大小、导航可访问性、描述符、使用 aria 等等。

但至于 .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: 0，DOM 看不到该元素，因此存在问题。上面使用 width: 1px; height: 1px; 的 CSS 并不是为了使内容对桌面和移动浏览器不可见（没有 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 将显示在所有其他设备上，单词 Error: 在文本阅读器上。

---

.sr-only 类对除 screen readers: 之外的所有设备隐藏一个元素

跳到主要内容 结合 .sr-only 和 .sr-only-focusable 以在元素获得焦点时再次显示该元素

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important; /* 2 */
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; /* 3 */
}

---