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 相关文章推荐
根据出生日期自动取得星座的js代码
Jul 20 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
javascript常用方法汇总
Dec 02 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
详解Vue 全局变量,局部变量
Apr 17 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
js复制到剪切板的实例方法
2013/06/28 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
loading动画特效小结
2017/01/22 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python中元组,列表,字典的区别
2017/05/21 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python函数中不定长参数的写法
2019/02/13 Python
python 调用钉钉机器人的方法
2019/02/20 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python psutil监控进程实例
2019/12/17 Python
python语言的优势是什么
2020/06/17 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
pandas实现导出数据的四种方式
2020/12/13 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
茶楼服务员岗位职责
2015/02/09 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
文明上网主题班会
2015/08/14 职场文书
多人股份制合作协议书
2016/03/19 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL