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显示当前文档最后修改日期的方法
Mar 19 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 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
chrome原生方法之数组
2011/11/30 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
vue router demo详解
2017/10/13 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
计算机学生求职信范文
2014/01/30 职场文书
五分钟演讲稿
2014/04/30 职场文书
工作推荐信范文
2014/05/10 职场文书
甜品店创业计划书
2014/08/14 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
导游词400字
2015/02/13 职场文书
外贸英文求职信范文
2015/03/19 职场文书
电信营业员岗位职责
2015/04/14 职场文书
学生检讨书怎么写
2015/05/07 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
nginx之内存池的实现
2022/06/28 Servers