Bootstrap的aria-label和aria-labelledby的区别
来源:互联网 发布:java员工管理系统简历 编辑:程序博客网 时间:2024/05/16 08:05
aria-label :
正常情况下,form表单的input组件有对应 的label,当input组件获取焦点时,屏幕阅读器读出相应的label里的文本。如:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset = "utf-8">
- <title>demo</title>
- <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
- <style type="text/css">
- body{padding: 20px;}
- </style>
- </head>
- <body>
- <form role = "form">
- <div class="form-group col-lg-3 form-horizontal">
- <label for = "idCard" class="control-label col-lg-5">身份证号:</label>
- <div class="col-lg-7">
- <input type = "text" id = "idCard" class="form-control">
- </div>
- </div>
- </form>
- </body>
- </html>
但是如果我们没有给输入框设置label时,当其获得焦点时,屏幕阅读器会读出aria-label属性的值,aria-label不会在视觉上呈现效果。
如:
- <body>
- <form role = "form">
- <div class="form-group col-lg-3 form-horizontal">
- <div class="col-lg-7">
- <input type = "text" id = "idCard" class="form-control" aria-label = "身份证号">
- </div>
- </div>
- </form>
- </body>
aria-labelledby属性
当想要的标签文本已在其他元素中存在时,可以使用aria-labelledby,并将其值为所有读取的元素的id。如下:
当ul获取到焦点时,屏幕阅读器是会读:“选择您的职位”
- <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>
阅读全文
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 ArCommands的用法
- ARIA
- bootstrap 中关于 HTML5 aria-* and role的用法
- android的一个下载框架Aria
- tabIndex 和 aria注意点
- WAI-ARIA
- D-Aria
- ARIA环境变量
- WAI-ARIA —— 让盲人更清楚我们的网页
- Aria and Teleoperation
- file
- mac、iOS端支持自定义布局的collection控件的实现与设计
- csdn java创建线程的三种方式及其对比
- RunTime.getRuntime().exec()运行脚本命令介绍和阻塞
- Linux下vsftpd安装配置
- Bootstrap的aria-label和aria-labelledby的区别
- 蟠桃记
- MS-SQLServer 2000 T-SQL 交叉报表(行列互换) 交叉查询 旋转查询
- java实现word下载及打包成zip下载(单个文件、多个文件)
- 常见TCP/IP协议记录
- Angular九中过滤器
- webservice定义
- EOJ 2019 加密1 && EOJ 2020 加密2
- Anbox LXC