当前位置: 首页 > Web前端 > HTML

bootstrap中sr-only的属性是什么?有什么用?

时间:2023-04-02 11:18:31 HTML

开发中经常发现bootStrap中有sr-only类,如下图,但是在浏览器中好像没有效果。作为普通用户,你觉得它没有效果。功能专为残障人士浏览网页而设计。在前端开发中,有时设计图上会出现一些只有普通视觉用户才能看到的元素。例如:导航栏菜单的当前页高亮显示,只有视力正常的人才能正常使用这些状态。残障人士、弱势群体或盲人可能会发现很难或无法看到导航菜单的亮点。他们可能会使用屏幕阅读器,即屏幕阅读器(sr)来上网。屏幕阅读器需要找到可识别的文本描述,然后将其“读”给用户。问题是:有些元素,比如选中的高亮状态,是读不出来的。因此,我们还需要编写这些元素的文字说明,但并不需要向普通用户展示,所以添加sr-only的意义在于保证屏幕阅读器能够正确阅读,不会影响正常人们的使用。例如:导航栏中的首页链接被选中并高亮显示,我们可以这样表示。主页(current)这样,正常人只有主页上有两页文字,但屏幕阅读器可以阅读主页当前推荐:30个你不能错过的新Web开发资源