html <a>链接按钮中<span class="sr-only">(current)</span>的作用

<li class="active">    <a href="#">首页 <span class="sr-only">(current)</span></a></li>这是专门为残障人士浏览网页设计的。

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

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

        问题是:一些元素,比如选中高亮状态无法读出。因此我们还要写上这些元素的文本说明,但是又不需要展示给普通用户看到,于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响正常人的使用。

        比如:导航栏首页链接被选中高亮,我们可以这样表示。

<li class="active">    <a href="#">首页 <span class="sr-only">(current)</span></a></li>

这样正常人看起来只有首页两个字,而屏幕阅读器却可以读首页 current

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值