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 相关文章推荐
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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获取淘宝分类id示例
2014/01/16 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php动态变量定义及使用
2015/06/10 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
php源码的安装方法和实例
2019/09/26 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
干部鉴定材料
2014/05/18 职场文书
2014年加油站工作总结
2014/12/04 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
Django drf请求模块源码解析
2021/06/08 Python
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers