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

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

Answer 2

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

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

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

• 可访问性@Google - 网络基础
• 无障碍开发者指南（我个人最喜欢的）
• WebAIM 原则+ WebAIM WCAG 清单
• 可访问性@ReactJS （很多好的资源和一般的东西）

为什么？

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

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

Answer 3

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

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

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

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

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

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

Answer 4

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

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

但至于.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; width: 1px; height: 1px; . 通过使用display: none并将您的 CSS 设置为height: 0和width: 0 ，DOM 看不到该元素，因此存在问题。 上面的 CSS 使用width: 1px; height: 1px; 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

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

Answer 5

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

.sr-only类对除screen readers:器之外的所有设备隐藏一个元素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 */

}