详解Bootstrap的aria-label和aria-labelledby应用


Posted in Javascript onJanuary 04, 2016

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>

详解Bootstrap的aria-label和aria-labelledby应用

但是如果我们没有给输入框设置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>

详解Bootstrap的aria-label和aria-labelledby应用

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>

详解Bootstrap的aria-label和aria-labelledby应用

PS:如果一个元素同时有aria-labelledby和aria-label,读屏软件会优先读出aria-labelledby的内容

以上内容是小编给大家介绍的Bootstrap的aria-label和aria-labelledby应用相关内容,希望本文分享能够给大家带来帮助,同时感谢大家一直以来对三水点靠木网站的支持。

Javascript 相关文章推荐
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 #Javascript
详解Bootstrap按钮
Jan 04 #Javascript
详解Bootstrap四种图片样式
Jan 04 #Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 #Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 #Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 #Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 #Javascript
You might like
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
Three.js基础部分学习
2017/01/08 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python通过Pillow实现图片对比
2020/04/29 Python
简述python Scrapy框架
2020/08/17 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
法学专业求职信范文
2015/03/19 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python