详解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学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
Angular工具方法学习
Dec 26 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
基于vue.js实现购物车
Jan 15 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 和 XML: 使用expat函数(二)
2006/10/09 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
实例讲解PHP表单处理
2019/02/15 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
浅析return false的正确使用
2013/11/04 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python实现实时监控文件的方法
2016/08/26 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
django教程如何自学
2020/07/31 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
大学毕业后的十年规划
2014/01/07 职场文书