Bootstrap的aria-label和aria-labelledby
2017-09-05 11:43
190 查看
aria-label
正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本。
但是如果我们没有给输入框设置label时,当其获得焦点时,屏幕阅读器会读出aria-label属性的值,aria-label不会在视觉上呈现效果。
aria-labelledby属性
当想要的标签文本已在其他元素中存在时,可以使用aria-labelledby,并将其值为所有读取的元素的id。如下:
当ul获取到焦点时,屏幕阅读器是会读:“选择您的职位”
PS:如果一个元素同时有aria-labelledby和aria-label,读屏软件会优先读出aria-labelledby的内容
正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本。
<!DOCTYPE html> <html lang="en"> <head> <title>aria-label实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> body{ padding: 20px; } </style> </head> <body> <form role="form"> <div class="form-group col-lg-3"> <label for="idCard" class="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"> <div class="col-lg-7"> <input type="text" id="idCard" class="form-control" aria-label="身份证号码"> </div> </div> </form> </body>
aria-labelledby属性
当想要的标签文本已在其他元素中存在时,可以使用aria-labelledby,并将其值为所有读取的元素的id。如下:
当ul获取到焦点时,屏幕阅读器是会读:“选择您的职位”
<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="#">测试工程师</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">开发工程师</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">销售工程师</a> </li> </ul> </div> </body>
PS:如果一个元素同时有aria-labelledby和aria-label,读屏软件会优先读出aria-labelledby的内容
相关文章推荐
- Bootstrap的aria-label和aria-labelledby
- Bootstrap的aria-label和aria-labelledby
- Bootstrap 中的 aria-label 和 aria-labelledby
- Bootstrap的aria-label和aria-labelledby的区别
- Bootstrap 中的 aria-label 和 aria-labelledby
- 详解Bootstrap的aria-label和aria-labelledby应用
- Bootstrap的aria-label和aria-labelledby
- Bootstrap的aria-label和aria-labelledby属性实例详解
- 详解Bootstrap的aria-label和aria-labelledby应用
- 详解Bootstrap的aria-label和aria-labelledby应用
- bootstrap3中.sr-only, aria-hidden
- 深入理解BootStrap -- 标签(label)与徽章(badge)12
- bootstrap 表单 label 和 input 实现左标签右输入布局
- aria-label及aria-labelledby应用//////////[信息无障碍产品联盟]
- 表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
- 深入理解BootStrap -- 标签(label)与徽章(badge)
- aria-label及aria-labelledby应用
- [转]--WAI-ARIA(role,aria-labelledby)无障碍网页应用(盲人等)
- bootstrap之input-group&label样式
- 你还可以把链接向两端对齐: ← Older Newer → <nav aria-label="..."> <ul class="pager"> <li class="previous">