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>
根据bootstrap'的文档,该类是用来从渲染的页面布局中隐藏只为屏幕阅读器准备的信息。
如果你不给每个输入都加上一个标签,那么屏幕阅读器就会对你的表单产生困扰。对于这些内联表单,你可以使用.sr-only类来隐藏标签。
这里有一个[例子][2]使用的样式。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
这很重要吗,或者我可以删除它吗?没有它也能正常工作。
它很重要,不要删除它。
你应该始终考虑屏幕阅读器的可访问性。无论如何,使用该类会隐藏该元素,因此你不应该看到视觉上的差异。
如果你有兴趣阅读关于可访问性的文章。
正如JoshC所说,这个类是用来隐藏屏幕阅读器的信息的。但不仅仅是隐藏标签,你也可以考虑向盲人用户隐藏一个内部链接"跳到主内容",如果你在主内容之前有一个复杂的导航或广告,这对盲人用户来说是可取的。
如果你想让你的网站与屏幕阅读器有更多的互动,可以使用 W3C标准化的ARIA属性,我绝对推荐访问 Google在线课程,这只需要1-2小时,或者至少看一下 至少看一下[Google'的40分钟视频][2]。
根据世界卫生组织的统计,有2.85亿人有视力障碍。因此,使一个网站无障碍是很重要的。
2019年更新。
作为开发者,我们应该制作无障碍的内容,简单地适用于所有开箱即用的内容,而不是专门针对屏幕阅读器。这并不总是可能的,但要小心使用ARIA和"屏幕阅读器专用" 调整。如果你不完全了解它,就不要这样做。不正确的实施可能比不使用它要糟糕得多。请阅读关于ARIA坏例子的可访问性-开发者指南。在那里你也可以找到完全无障碍的组件/小工具,它们不需要任何 "仅限屏幕阅读器 "的干预。
我在navbar范例中发现了这一点,并将其简化。
<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
部分被隐藏)。
如果你使用屏幕阅读器,你会听到哪一个被选中。
由于这种技术,盲人应该更容易在你的网站上导航。
.sr-only
是一个专门用于屏幕阅读器的类名,你可以使用任何类名,但.sr-only
是很常用的。
你可以使用任何类名,但.sr-only
是很常用的。
如果你不关心开发时的合规性,那么可以将其删除。
如果删除的话,不会对UI造成任何影响,因为这个类的CSS在桌面和移动设备浏览器中是不可见的。
关于.sr-only
的使用,这里似乎缺少一些信息来解释它的目的和是为屏幕阅读器服务的。
首先,非常重要的一点是,要时刻牢记受损用户。
受损是508合规的目的。
https://www.section508.gov/,bootstrap考虑到了这一点,这是非常好的。
然而,使用.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: 1px;"。 0
和width: 0",该元素就不会被DOM看到,从而出现问题。 上述CSS使用
width:
1px;
高度:1px; "的CSS并不是所有的元素都能被DOM看到,因此存在问题。
1px;并不是让内容在桌面和手机浏览器上看不到的全部(如果没有
overflow:
hidden,你的内容仍然会显示在屏幕上),而屏幕阅读器则可以看到。 将内容从桌面和移动浏览器中隐藏起来是通过在
width:
1px和
height:
1px`的偏移量来实现。
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
最后,为了能很好地了解屏幕阅读器看到了什么,并将其转达给受损的用户,请关闭你的浏览器的页面样式。 对于Firefox来说,你可以通过以下方式进行关闭。
View > Page Style > No Style
我希望我在这里提供的信息,除了其他的回答之外,还能对某人有进一步的帮助。
确保对象只显示(或应该显示)给读者和类似设备。 它与其他带有 attribute 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:字。
.sr-only
类对除`屏幕阅读器'以外的所有设备隐藏一个元素。
跳到主要内容 将.sr-only与.sr-only-focusable结合起来,在元素被聚焦时再次显示。