什么是sr-only在Bootstrap 3？

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所说,该类用于隐藏用于屏幕阅读器的信息.但是,不仅要隐藏标签,您可能会考虑向视力正常的用户隐藏一个内部链接"跳转到主要内容",如果您有复杂的导航或在内容之前添加页面标题,这对盲人用户来说是理想的.他们需要按下箭头键太多次才能通过屏幕阅读器到达它.

如果您希望您的网站与屏幕阅读器进行更多互动,请使用W3C标准化ARIA属性,我绝对建议您访问Google在线课程,该课程最长只需1-2 小时或至少观看Google的40分钟视频.

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

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-only508的合规性并不需要考虑使用.您可以使用颜色,字体大小,通过导航访问,描述符,使用咏叹调等等.

但至于.sr-only- CSS究竟做了什么？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: 0和width: 0,该元素不被DOM看到,因此是有问题的.上面的CSS使用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:

跳到主要内容合并输出功率等，只与输出功率等，只为焦点的再次显示元素时，它的重点是