aria-label属性用来给当前元素加上的标签描述，接受字符串作为参数。

是用不可视的方式给元素加label（如果被描述元素存在真实的描述元素，可使用 aria-labelledby 属性作为来绑定描述元素和被描述元素来代替）。

aria-label

在下面的示例中，按钮（button）元素被定义为一个关闭（close）按钮，按钮中间有一个“X”字符。辅助软件并不能知道X是什么意思，所以需要aria-label标签来为辅助设备提供相应的标识来告诉它这个button是close的作用。

<button aria-label="Close" onclick="myDialog.close()">X</button>

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

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

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

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

       <form role = "form">

            <div class="form-group col-lg-3 form-horizontal" 

                <input type = "text" id = "idCard" class="form-control" aria-label = "身份证号">

            <div>

       </form>

当想要的标签文本已在其他元素中存在时，可以使用

aria-labelledby

，并将其值为所有读取的元素的id。如下：

当ul获取到焦点时，屏幕阅读器是会读：“选择您的职位”

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

    </ul>

</div>

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