Bootstrap的aria-label和aria-labelledby属性实例详解


Posted in Javascript onNovember 02, 2018

aria-label

正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本。

<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <title>demo</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <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>

但是如果我们没有给输入框设置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>

aria-labelledby
<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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >测试工程师</a>
     </li>
     <li role="presentation">
       <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >开发工程师</a>
     </li>
     <li role="presentation">
       <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >销售工程师</a>
     </li>     
    </ul>
  </div>
</body>

注:

如果一个元素同时有aria-labelledby和aria-label,读屏软件会优先读出aria-labelledby的内容

总结

以上所述是小编给大家介绍的Bootstrap的aria-label和aria-labelledby属性实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
JQuery live函数
Dec 24 Javascript
js中substring和substr的定义和用法
May 05 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
使用JavaScript破解web
Sep 28 Javascript
koa源码中promise的解读
Nov 13 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 #Javascript
vue实现与安卓、IOS交互的方法
Nov 02 #Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 #Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 #Javascript
微信小程序实现留言板(Storage)
Nov 02 #Javascript
微信小程序实现留言板功能
Nov 02 #Javascript
小程序实现留言板
Nov 02 #Javascript
You might like
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python 文件操作的详解及实例
2017/09/18 Python
查看django版本的方法分享
2018/05/14 Python
Python双向循环链表实现方法分析
2018/07/30 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python实现邮件自动发送
2019/08/10 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
python中判断文件结束符的具体方法
2020/08/04 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
捐书活动总结
2014/05/04 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
Java 多态分析
2022/04/26 Java/Android
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android