首页 新闻 会员 周边 捐助

sr-only的作用

0
[待解决问题]

这是专门为残障人士浏览网页设计的。在前端开发中,有些时候设计图上面会出现仅供正常视觉用户看的元素。比如:导航栏菜单当前页面选中高亮状态,这些状态只有视力正常的人才能正常使用。

而残障人士,弱势或盲人是很难或者根本看不出导航菜单高亮的。他们上网可能借助的是屏幕阅读器,也就是 screen reader(sr),屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。

问题是:一些元素,比如选中高亮状态无法读出。因此我们还要写上这些元素的文本说明,但是又不需要展示给普通用户看到,于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响正常人的使用。
<li class="active">
<a href="#">首页 <span class="sr-only">(current)</span></a>
</li>
这样正常人看起来只有首页两个字,而屏幕阅读器却可以读首页 current

always_strive的主页 always_strive | 初学一级 | 园豆:118
提问于:2018-11-16 10:16
< >
分享
所有回答(1)
0

问题是什么?

会长 | 园豆:12463 (专家六级) | 2018-11-16 10:30

本来是写笔记的,不小心写成提问的了

支持(0) 反对(0) always_strive | 园豆:118 (初学一级) | 2018-11-16 11:17
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册