Bootstrap 中的 aria-label 和 aria-labelledby
来源:互联网 发布:万代告淘宝 编辑:程序博客网 时间:2024/06/05 00:23
正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本。
<form> <div class="form-group col-md-2"> <label for="name">姓名</label> <input type="text" id="name" class="form-control"> </div </form>
但是如果我们没有给输入框设置label时,当其获得焦点时,屏幕阅读器会读出aria-label属性的值,aria-label不会在视觉上呈现效果。
aria-label
经测试,aria-label 只有加在可被 tab 到的元素上,读屏才会读出其中的内容。
<form action=""> <div class="form-group"> <input type="text" class="form-control" aria-label="姓名"> </div> </form>
aria-labelledby
当想要的标签文本已在其他元素中存在时,可以使用aria-labelledby,并将其值为所有读取的元素的id。如下:
当ul获取到焦点时,屏幕阅读器是会读:“更多城市”
<div class="dropdown"> <button class="btn btn-default " id="dropdownMenu1" data-toggle="dropdown" > 更多城市<span class="caret "></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="">广州</a></li> <li><a href="">深圳</a></li> <li><a href="">东莞</a></li> </ul> </div>
如果一个元素同时有 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
- KNN学习及实现
- 画风茜茜
- iOS开发无法导出p12证书的问题解决办法
- 一起学Netty(十二)之 Netty心跳简单Demo
- FillRect、FrameRect与Rectangle矩形绘制函数使用对比分析
- Bootstrap 中的 aria-label 和 aria-labelledby
- 常见的时间复杂度所对应的数据规模
- 一起学Netty(十八)netty源码学习之netty server端源码初读(上)
- mysql万言深度剖析原理
- Atom动态代码插件Activate Power Mode常用设置
- bzoj 1726: [Usaco2006 Nov]Roadblocks第二短路(A*第k短路)
- web客户端存储之cookie
- 基于Excel的QR二维码生成工具——原理及算法详解(最终篇)
- Spring Cache抽象-基于XML的配置声明(基于EhCache的配置)