aria-label
正常情況下，form表單的input組件都有對(duì)應(yīng)的label.當(dāng)input組件獲取到焦點(diǎn)時(shí)，屏幕閱讀器會(huì)讀出相應(yīng)的label里的文本。
如：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>demo</title>
<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{padding: 20px;}
</style>
</head>
<body>
<form role = "form">
<div class="form-group col-lg-3 form-horizontal">
<label for = "idCard" class="control-label col-lg-5">身份證號(hào)：</label>
<div class="col-lg-7">
<input type = "text" id = "idCard" class="form-control">
</div>
</div>
</form>
</body>
</html>
image.png
但是如果我們沒有給輸入框設(shè)置label時(shí)，當(dāng)其獲得焦點(diǎn)時(shí)，屏幕閱讀器會(huì)讀出aria-label屬性的值，aria-label不會(huì)在視覺上呈現(xiàn)效果。
如：
<body>
<form role = "form">
<div class="form-group col-lg-3 form-horizontal">
<div class="col-lg-7">
<input type = "text" id = "idCard" class="form-control" aria-label = "身份證號(hào)">
</div>
</div>
</form>
</body>
image.png
當(dāng)想要的標(biāo)簽文本已在其他元素中存在時(shí)，可以使用aria-labelledby，并將其值為所有讀取的元素的id。如下：
當(dāng)ul獲取到焦點(diǎn)時(shí)，屏幕閱讀器是會(huì)讀：“選擇您的職位”
<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="#">測(cè)試工程師</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">開發(fā)工程師</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">銷售工程師</a>
</li>
</ul>
</div>
</body>
image.png
PS：如果一個(gè)元素同時(shí)有aria-labelledby和aria-label，讀屏軟件會(huì)優(yōu)先讀出aria-labelledby的內(nèi)容
