sr-only：全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。
有时候 UI 上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。
他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。
问题是图形元素怎么可能“读出来”呢？因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现。
例如：
以下例子中，Error：就仅仅为残障人士准备的，残障专用设备读取到备注信息，但是不会在普通设备上显示，不影响正常人的阅读。
image.png
sr-only：全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于...
开发中经常发现bootStrap中有sr-only类 sr-only 是屏幕阅读器的意思，是给视力有障碍的人提供的...
1.1 Bootstrap的作用 Bootstrap的作用可以参考AbstractBootstrap的javado...
Bootstrap 的初始化作用 初始化Bootstrap，即：bootstrap = Bootstrap(app...
什么是BootStrap？BootStrap有什么作用？ 1、BootStrap是基于html、css、javas...
aria是Accessible Rich Internet Application简称，百度翻译：访问富互联网应用...
data-dismiss是bootstrap里自定义的属性，给一个元素data-dimiss属性的话，可以通过点击...
bootstrap笔记总结 Bootstrap入门笔记之（三）栅格系统 我的Bootstrap笔记，常用类名知...
ng-if 隔离作用域 入坑情景： 在使用ui-bootstrap时，根据ui-bootstrap的指引： 官方J...
HTML 代码 例如： 使用 $("#title").focus(); 没有任何作用。 bootstrap 是使...
本文标题：bootstrap之sr-only作用
本文链接：https://www.haomeiwen.com/subject/eleiqftx.html
网友评论