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中function 的 length 属性
May 27 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
拖拉表格的JS函数
2008/11/20 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
Python 错误和异常小结
2013/10/09 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python网络编程之五子棋游戏
2020/05/14 Python
python如何查看网页代码
2020/06/07 Python
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
优秀大学生求职自荐信范文
2014/04/19 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
校长一岗双责责任书
2015/05/09 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
Pytest中conftest.py的用法
2021/06/27 Python