详解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中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
js实现缓动动画
Nov 25 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
一个简洁的多级别论坛
2006/10/09 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python字典及字典基本操作方法详解
2018/01/30 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
中学教师培训制度
2014/01/31 职场文书
培训专员岗位职责
2014/02/26 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
CSS基础详解
2021/10/16 HTML / CSS