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 内置对象属性及方法集合
Jul 04 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
js实现图片推拉门效果代码实例
May 18 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
vue 点击其他区域关闭自定义div操作
Jul 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 array_multisort() 函数的深入解析
2013/06/20 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
javascript简易画板开发
2020/04/12 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
js实现转动骰子模型
2019/10/24 Javascript
python字典多条件排序方法实例
2014/06/30 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
基于python图像处理API的使用示例
2020/04/03 Python
利用Python优雅的登录校园网
2020/10/21 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
12岁生日感言
2014/01/21 职场文书
丑小鸭教学反思
2014/02/03 职场文书
网络宣传方案
2014/03/15 职场文书
英语专业自荐书
2014/06/13 职场文书
劳动竞赛口号
2014/06/16 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2015年度物流工作总结
2015/04/30 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
HTML基础详解(下)
2021/10/16 HTML / CSS
win sever 2022如何占用操作主机角色
2022/06/25 Servers