Bootstrap 中的 aria-label 和 aria-labelledby
来源:互联网 发布:物流仓储软件供应商 编辑:程序博客网 时间:2024/06/05 02:09
- aira-label
- aria-labelledby
- 总结
aira-label
正常情况下,form 表单的 input 组件都有对应的 label 。
<form role="form"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div></form>
当 input 组件获取到焦点时,屏幕阅读器会读出相应的 label 里的文本。
但是如果我们没有给输入框设置 label 时,当其获得焦点时,屏幕阅读器会读出 aria-label 属性的值,aria-label 不会在视觉上呈现效果。
<form role="form"> <div class="form-group"> <input type="text" class="form-control" id="name" placeholder="请输入名称" aria-label="名称"> </div></form>
经测试,aria-label 只有加在可被 tab 到的元素上,读屏才会读出其中的内容。
aria-labelledby
如果想要屏幕阅读器读的标签文本在其他元素中存在时,可以将其值为该元素的 id。设置 aria-labelledby 的值为某个元素的 id 。那么屏幕阅读器就可以读取它的值。
<body> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 选择你的职业 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">教师</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">医生</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">学生</a> </li> </ul> </div></body>
当 ul 获取到焦点时,屏幕阅读器会读:“选择你的职业”。
如果一个元素同时有 aria-labelledby 和 aria-label ,读屏软件会优先读出 aria-labelledby 的内容。
总结
这两个属性是为特殊网页阅读器设置的属性,在一些特殊设备上,当浏览到这样的内容设备会将内容读出来。是为了一些有视力障碍的人能够同样”浏览”网页而准备的。
阅读全文
0 0
- Bootstrap 中的 aria-label 和 aria-labelledby
- Bootstrap 中的 aria-label 和 aria-labelledby
- Bootstrap的aria-label和aria-labelledby
- Bootstrap的aria-label和aria-labelledby
- Bootstrap的aria-label和aria-labelledby
- 详解Bootstrap的aria-label和aria-labelledby应用
- Bootstrap的aria-label和aria-labelledby的区别
- aria-label及aria-labelledby应用
- ARIA
- HTML中的【aria-*】标签
- aria中的ArFunctor真相
- HTML5中的aria与role
- tabIndex 和 aria注意点
- WAI-ARIA
- D-Aria
- ARIA环境变量
- bootstrap 中关于 HTML5 aria-* and role的用法
- Aria and Teleoperation
- ubuntu14.04英文环境下安装中文输入法
- 基础数学
- 利用xinetd进行时间同步
- 数组名和取地址数组名的区别
- lakeshore自学笔记(一)
- Bootstrap 中的 aria-label 和 aria-labelledby
- Android初学——开机宣传界面
- LinkedList简介
- Thinkphp5之多语言
- Python 导入模块是的
- JAVA项目经验(转自大牛的经验分享)
- QT:内存泄漏
- Xcode代码格式化教程
- java中的运算