详解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 相关文章推荐
表单中单选框添加选项和移除选项
Jul 04 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 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页面中文乱码分析
2013/10/29 PHP
php内存缓存实现方法
2015/01/24 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
js实现消息滚动效果
2017/01/18 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
Angular父组件调用子组件的方法
2018/04/02 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
党员十八大心得体会
2014/09/12 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
公司承诺书格式范文
2015/04/28 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python