详解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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
WEEX环境搭建与入门详解
Oct 16 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/06/08 PHP
PHP 中常量的知识整理
2017/04/14 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python 调用Java实例详解
2017/06/02 Python
Python优先队列实现方法示例
2017/09/21 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
六十岁生日答谢词
2014/01/10 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
人力资源部岗位职责
2015/02/11 职场文书
详解Vue的options
2021/05/15 Vue.js
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android