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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
angular实现form验证实例代码
Jan 17 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 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 组件化编程技巧
2009/06/06 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
js类型检查实现代码
2010/10/29 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
python对字典进行排序实例
2014/09/25 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python异常处理操作实例详解
2018/05/10 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
财务部副经理岗位职责范本
2014/06/17 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
工厂见习报告范文
2014/10/31 职场文书
毕业生见习报告总结
2014/11/08 职场文书
小学生节水倡议书
2015/04/29 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript