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 Onunload与Onbeforeunload使用小结
Dec 31 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
微信小程序支付前端源码
Aug 29 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
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
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php 显示指定路径下的图片
2009/10/29 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中self原理实例分析
2015/04/30 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python编程之多态用法实例详解
2015/05/19 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python中单下划线_的常见用法总结
2018/07/10 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
师范生教师实习自我鉴定
2013/09/27 职场文书
小学语文教学反思
2014/02/10 职场文书
结婚保证书范文
2014/04/29 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
亮剑精神观后感
2015/06/05 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python