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 相关文章推荐
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
javascript对象3个属性特征
Nov 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实现过滤UBB代码的类
2015/03/12 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
使用tensorflow实现线性回归
2018/09/08 Python
对python调用RPC接口的实例详解
2019/01/03 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
python中字典增加和删除使用方法
2020/09/30 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
给儿子的表扬信
2014/01/15 职场文书
面试通知单大全
2015/04/20 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
团拜会主持词
2015/07/04 职场文书
任命书格式范文
2015/09/22 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
python基础之//、/与%的区别详解
2022/06/10 Python