Bootstrap 3 中的 sr-only 是什么？

Question

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>

Answer 1

.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 */
}

Answer 2

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

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

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

• Accessibility @Google - Web Fundamentals
• Accessibility Developer Guide（我个人最喜欢的）
• WebAIM Principles + WebAIM WCAG Checklist
• Accessibility @ReactJS（很多好的资源和一般的东西）

为什么？

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

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

Answer 3

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

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

这很重要，不要删除它。

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

如果您有兴趣阅读有关可访问性的内容：

• Web Accessibility Initiative (WAI)

• MDN Accessibility documentation

Answer 4

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

这里似乎缺少一些关于使用.sr-only 来解释其目的和用于屏幕阅读器的信息。首先，始终牢记受损用户非常重要。减值是 508 合规性的目的：https://www.section508.gov/，引导程序考虑到这一点非常好。然而，.sr-only 的使用并不是 508 合规性需要考虑的全部。您可以使用颜色、字体大小、导航可访问性、描述符、使用 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

我希望我在这里提供的信息除了其他回复之外，对某人有进一步的用处。

Answer 5

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

Answer 6

我在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部分被隐藏了）：

• 默认
• 静态顶部
• 固定顶部

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

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

由于这种技术，盲人应该可以更轻松地在您的网站上导航。