詳解Bootstrap的aria-label和aria-labelledby應用

更新時間：2016年01月04日 11:14:04 作者：YvetteLau

這篇文章主要介紹了詳解Bootstrap的aria-label和aria-labelledby應用的相關資料,需要的朋友可以參考下

aria-label

正常情況下，form表單的input組件都有對應的label.當input組件獲取到焦點時，屏幕閱讀器會讀出相應的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>

但是如果我們沒有給輸入框設置label時，當其獲得焦點時，屏幕閱讀器會讀出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屬性

當想要的標簽文本已在其他元素中存在時，可以使用aria-labelledby，并將其值為所有讀取的元素的id。如下：
當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>