Bootstrap 中的 aria-label 和 aria-labelledby

最新推荐文章于 2024-04-03 03:15:47 发布

Never Yu

最新推荐文章于 2024-04-03 03:15:47 发布

阅读量3.1w

点赞数 11

分类专栏：前端文章标签： bootstrap aria-label

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/csdn_yudong/article/details/72627937

版权

前端专栏收录该内容

180 篇文章 16 订阅

订阅专栏

aira-label

正常情况下，form 表单的 input 组件都有对应的 label 。

<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
</form>

当 input 组件获取到焦点时，屏幕阅读器会读出相应的 label 里的文本。

但是如果我们没有给输入框设置 label 时，当其获得焦点时，屏幕阅读器会读出 aria-label 属性的值，aria-label 不会在视觉上呈现效果。

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control" id="name" placeholder="请输入名称" aria-label="名称">
  </div>
</form>

经测试，aria-label 只有加在可被 tab 到的元素上，读屏才会读出其中的内容。

aria-labelledby

如果想要屏幕阅读器读的标签文本在其他元素中存在时，可以将其值为该元素的 id。设置 aria-labelledby 的值为某个元素的 id 。那么屏幕阅读器就可以读取它的值。

<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>

当 ul 获取到焦点时，屏幕阅读器会读：“选择你的职业”。

如果一个元素同时有 aria-labelledby 和 aria-label ，读屏软件会优先读出 aria-labelledby 的内容。

总结

这两个属性是为特殊网页阅读器设置的属性，在一些特殊设备上，当浏览到这样的内容设备会将内容读出来。是为了一些有视力障碍的人能够同样”浏览”网页而准备的。

—————————(正文完)————————————
一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后：约定优于配置——-软件开发的简约原则.

——————————– (完)————————————–

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博….

width="100%" height="500" class="share_self" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=8&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=5346488237&verifier=d529ff3a&dpc=1">