詳解Bootstrap的aria-label和aria-labelledby應用_javascript技巧
- WBOY原創
- 2016-05-16 15:22:102268瀏覽
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的內容
以上內容是小編給大家介紹的Bootstrap的aria-label和aria-labelledby應用相關內容，希望本文分享能夠給大家帶來幫助，同時感謝大家一直以來對腳本之家網站的支持。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn