Bootstrap的aria-label和aria-labelledby

aria-label

正常情况下，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标签（label）的使用
基本的标签和带语境的标签: <div class="container"> <span class="label label-default" ...
MariaDB的Aria存储引擎
2019独角兽企业重金招聘Python工程师标准>>> # Aria存储引擎 Aria是MariaDB的一个全新的存储引擎,它是作为MyISAM存储引擎的替代者而开发的. 它的特点: ...
web语义化之SEO和ARIA
在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO ###什么是SEO? S ...
Backprop Induced Feature Weighting for Adversarial Domain Adaptation with Iterative Label Distributi
反向传播算法诱导的特征加权用于迭代标签分布对齐的对抗域适应研究问题: 主流的基于对抗的方法在适应过程中通常会忽略分类器,而且对分类没有影响的背景特征也得到了适应. 存在标签分布偏移( LDS ),源 ...
jqGrid+bootstrap使用
本文章适用于使用jqGrid+bootstrap搭建的表格. 效果图如下: 需要引入的资源文件 bootstrap.min.css ui.jqgrid-bootstrap-ui.css ui.jqgr ...
WAI-ARIA和屏幕阅读器
最近看到一个面试题上面有一个问题是:请解释ARIA和屏幕阅读器是什么?以及如何使用网站实现无障碍访问? 然后在看bootstrap的时候也有很多属性不知道是什么意思,就搜了一下,下面总结: WAI-A ...
第七天黑马十次方吐槽列表与详细页、发吐槽与评论功能、问答频道功能、掌握DataURL和阿里云OSS
第7章网站前台-吐槽与问答学习目标: ** 完成吐槽列表与详细页完成发吐槽与评论功能,掌握富文本编辑器的使用完成问答频道功能掌握DataURL和阿里云OSS** 1 吐槽列表与详细页 1.1 ...
屏幕阅读器安全吗_如何为屏幕阅读器设计网站布局
屏幕阅读器安全吗 It's easy to think about a layout as being a primarily visual concern. The header goes up t ...
HTML5设计更具有交互性的标签方法（含智能辅助设备使用的HTML5，翻译资料）
渐进增强和ARIA 渐进增强是一种使用语义HTML.stylesheets样式表和scripting脚本促进可访问性的Web设计方法.我们的想法是创建一个网站,在这个网站上,每个人都可以使用基本内容, ...
WAI-ARIA无障碍网页应用 HTML5 设计辅助功能
使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...

Bootstrap的aria-label和aria-labelledby

Bootstrap的aria-label和aria-labelledby相关推荐

最新文章

热门文章