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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
vue 组件开发原理与实现方法详解
Nov 29 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
把input初始值不写value的具体实现方法
2013/07/04 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
python求解水仙花数的方法
2015/05/11 Python
Python机器学习之决策树算法
2017/12/22 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
WxPython实现无边框界面
2019/11/18 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
前端JavaScript大管家 package.json
2021/11/02 Javascript
Vue+Flask实现图片传输功能
2022/04/01 Vue.js