Detailed explanation of Bootstrap's aria-label and aria-labelledby applications

Detailed explanation of Bootstrap's aria-label and aria-labelledby applications_javascript skills

WBOY

Release： 2016-05-16 15:22:10

Original

2302 people have browsed it

aria-label

Under normal circumstances, the input component of the form has a corresponding label. When the input component gets focus, the screen reader will read the text in the corresponding label.
Such as:

<!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>

Copy after login

But if we do not set a label for the input box, when it gains focus, the screen reader will read the value of the aria-label attribute, and the aria-label will not have a visual effect.
Such as:

<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>

Copy after login

aria-labelledby attribute

When the desired label text already exists in other elements, you can use aria-labelledby and set its value to the id of all read elements. As follows:
When ul gets focus, the screen reader will read: "Select your position"

<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>

Copy after login

PS: If an element has both aria-labelledby and aria-label, the screen reading software will read the content of aria-labelledby first

The above content is related to the aria-label and aria-labelledby applications of Bootstrap introduced by the editor. I hope that sharing this article can help you. At the same time, thank you for your continued support of the Script House website.