787

类是做什么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>
4

6 回答 6

817

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

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

这很重要，不要删除它。

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

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

于 2013-11-03T21:53:03.530 回答
37

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

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

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

为什么？

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

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

于 2013-11-27T12:47:29.697 回答
30

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

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

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

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

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

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

于 2015-01-03T14:07:02.590 回答
14

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

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

但至于.sr-only- CSS 实际上做了什么？用于.sr-only. 我使用的少数几个之一如下：

.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: 0and width: 0，DOM 看不到该元素，因此存在问题。使用上述 CSSwidth: 1px; height: 1px;并不是为了使内容对桌面和移动浏览器不可见（没有overflow: hidden，您的内容仍会显示在屏幕上），并且对屏幕阅读器可见。隐藏桌面和移动浏览器的内容是通过添加一个偏移量来完成的width: 1px，height: 1px之前提到过使用：

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

最后，要很好地了解屏幕阅读器看到的内容并将其传递给受损用户，请关闭浏览器的页面样式。对于 Firefox，您可以通过以下方式执行此操作：

View > Page Style > No Style

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

于 2017-01-04T16:11:15.603 回答
8

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

于 2015-01-24T11:17:58.083 回答
6

该类.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 */
}
于 2017-03-08T07:34:12.497 回答