Bootstrap 3中的sr-Only是什么？

类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>
556710 次浏览
小开
最佳答案

根据引导程序留档，该类用于从呈现页面的布局中隐藏仅用于屏幕阅读器的信息。

如果您不为每个输入都包含标签，屏幕阅读器将在表单中遇到麻烦。对于这些内联表单，您可以使用仅限. sr的类隐藏标签。

以下是使用的示例样式：

.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}

它很重要还是我可以删除它？没有效果很好。

这很重要，不要删除它。

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

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

小开

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

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

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

为啥？

据世卫组织称，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-only部分隐藏）：

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

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

  • 默认
  • 静态顶部
  • 固定顶部（电流）

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

小开

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

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

小开

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

关于使用.sr-only来解释其目的和用于屏幕阅读器，这里似乎缺少一些信息。首先，始终牢记受损用户是非常重要的。损害是508合规性的目的：https://www.section508.gov/，引导程序很好地考虑到了这一点。然而，使用.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;的原因。通过使用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

我希望我在这里提供的信息是进一步使用的人除了其他答复。

小开

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

跳转到主要内容将. sr-Only和. sr-only-的焦点结合起来，当元素聚焦时再次显示

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

提交答案