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'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;
}

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

重要的是，不要将其删除。

您应始终将屏幕阅读器视为可访问性目的。使用该类会隐藏元素，因此您不应该看到视觉差异。

如果您对阅读可访问性感兴趣：

Answer 2

正如JoshC所说，该课程用于隐藏用于屏幕阅读器的信息。但是，不仅要隐藏标签，您可能会考虑向有视力的用户隐藏内部链接“跳转到主要内容”，如果您有复杂的导航或在内容之前添加页面标题，这对盲人用户来说是理想的。他们需要按下箭头键太多次才能通过屏幕阅读器到达它。

如果您希望自己的网站与屏幕阅读器进行更多互动，请使用 W3C标准化ARIA属性，我绝对建议访问 Google online course，只需1-2小时或更长时间至少看Google's 40min video。

据世界卫生组织统计，有2.85亿人患有视力障碍。因此，使网站可访问非常重要。

Answer 3

我在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部分）：

默认
静态顶部
修正了顶部

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

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

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

Answer 4

.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

我希望我在这里提供的信息除了其他回复之外还可以用于其他人。

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:

之外的所有设备

跳至主要内容将.sr-only与.sr-only-focusable结合使用，以便在聚焦时再次显示该元素

什么是sr-only在Bootstrap 3？

6 个答案: