### 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不會在視覺上呈現效果。
如:
~~~
<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="#">開發工程師</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">銷售工程師</a>
</li>
</ul>
</div>
</body>
~~~

PS:如果一個元素同時有aria-labelledby和aria-label,讀屏軟件會優先讀出aria-labelledby的內容
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法(二)
- JS this詞法(三)
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證(登錄/注冊)
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單(一)
- Bootstrap表單(二)
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異(checkbox)
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器(全)
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述(推薦)
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解