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 相关文章推荐
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
详解React中的组件通信问题
Jul 31 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
浅谈js中的bind
Mar 18 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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调用Twitter的RSS的实现代码
2010/03/10 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php GeoIP的使用教程
2011/03/09 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
Python探索之ModelForm代码详解
2017/10/26 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python配置文件处理的方法教程
2019/08/29 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
pymysql模块的操作实例
2019/12/17 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
css3的过滤效果简单实例
2016/08/03 HTML / CSS
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
计算机学生求职信范文
2014/01/30 职场文书
学生安全承诺书
2014/05/22 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
运动会加油稿100字
2014/09/19 职场文书
房屋授权委托书范本
2014/10/07 职场文书
故宫英文导游词
2015/01/31 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
成事在人观后感
2015/06/16 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书