详解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 相关文章推荐
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
Javascript 构造函数 实例分析
Nov 26 Javascript
jQuery 页面载入进度条实现代码
Feb 08 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
详解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
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
js同源策略详解
2015/05/21 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
在python image 中实现安装中文字体
2020/05/16 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
三年级学生评语
2014/04/23 职场文书
旅游文化节策划方案
2014/06/06 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
敬老月活动总结
2014/08/28 职场文书