Bootstrap 中的 aria-label 和 aria-labelledby

正常情况下，form表单的input组件都有对应的label.当input组件获取到焦点时，屏幕阅读器会读出相应的label里的文本。

<form>
    <div class="form-group col-md-2">
      <label for="name">姓名</label>
      <input type="text" id="name" class="form-control">
    </div
  </form>

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

aria-label

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

  <form action="">
    <div class="form-group">
        <input type="text" class="form-control" aria-label="姓名">
    </div>
  </form>

aria-labelledby

当想要的标签文本已在其他元素中存在时，可以使用aria-labelledby，并将其值为所有读取的元素的id。如下：

当ul获取到焦点时，屏幕阅读器是会读：“更多城市”

<div class="dropdown">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市<span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>
     </div>

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

简而言之：

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