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

最後更新：2016-01-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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應用相關內容，希望本文分享能夠給大家帶來協助，同時感謝大家一直以來對幫客之家網站的支援。

您可能感興趣的文章:

ServerVariables集合檢索預定的環境變數
php Undefined index和Undefined variable的解決方案
you *might* want to use the less safe log_bin_trust_function_creators variable
asp.net Request.ServerVariables[] 讀解
PHP提示Notice: Undefined variable的解決辦法
使用c++11打造好用的variant方法
MariaDB(Mysql分支)my.cnf設定檔中文注釋版
淺談MySQL和mariadb區別

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More