.sr-only 给我的启示

最近在使用adminLTE这个UI库开发一个物联网管理的后台界面,在开发的过程中看见一个地方使用了sr-only这个类名.按理说界面效果达到后就完成工作了,但是本着认真负责的态度还是想知道这个sr-only是怎么一回事.

原来这个UI库是基于Bootstrap,而这个sr-only类名就是源于Bootstrap.这是专门为残障人士浏览网页设计的一个功能。

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

而残障人士上网可能借助的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。

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

比如：导航栏首页链接被选中高亮，我们可以这样表示。这样正常人看起来只有首页两个字，而屏幕阅读器却可以读首页 current.

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

以上是对其用法的解释,但这不是重点.重点是:"别忘了还有残疾人朋友的存在,无论是做网页还是做其他工作,而和谐的社会的重点之一就是互相的关怀".