详解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 相关文章推荐
jQuery - css() 方法示例详解
Jan 16 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
解决LayUI表单获取不到data的问题
Aug 20 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
手写实现JS中的new
Nov 07 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实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python内置类型性能分析过程实例
2020/01/29 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
最新党员思想汇报
2014/01/01 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
写给老师的表扬信
2014/01/21 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
同志主要表现材料
2014/08/21 职场文书
重点工程汇报材料
2014/08/27 职场文书
小学生运动会报道稿
2014/09/12 职场文书
2015年教师新年寄语
2014/12/08 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏