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.all还是document.getElementsByName?
Jul 21 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 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安全配置
2006/12/06 PHP
swfupload 多文件上传实现代码
2008/08/27 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
js数组操作常用方法
2014/05/08 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python插入排序算法实例分析
2015/07/03 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python用requests实现http请求代码实例
2019/10/31 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Python项目打包成二进制的方法
2020/12/30 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
文字自荐书范文
2014/02/10 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
商超业务员岗位职责
2015/02/13 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
党校毕业个人总结
2015/02/28 职场文书