詳解Bootstrap的aria-label和aria-labelledby應(yīng)用

2019-11-20 10:52:08

字體：大中小

供稿：網(wǎng)友

aria-label

正常情況下，form表單的input組件都有對應(yīng)的label.當(dāng)input組件獲取到焦點時，屏幕閱讀器會讀出相應(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">身份證號：</label>    <div class="col-lg-7">     <input type = "text" id = "idCard" class="form-control">    </div>     </div>   </form> </body> </html>

但是如果我們沒有給輸入框設(shè)置label時，當(dāng)其獲得焦點時，屏幕閱讀器會讀出aria-label屬性的值，aria-label不會在視覺上呈現(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 = "身份證號">    </div>     </div>   </form> </body>

aria-labelledby屬性

當(dāng)想要的標(biāo)簽文本已在其他元素中存在時，可以使用aria-labelledby，并將其值為所有讀取的元素的id。如下：
當(dāng)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="#">開發(fā)工程師</a>    </li>    <li role="presentation">     <a role="menuitem" tabindex="-1" href="#">銷售工程師</a>    </li>     </ul>  </div> </body>