search

Home >Web Front-end >JS Tutorial >Detailed explanation of Bootstrap's aria-label and aria-labelledby applications_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 15:22:102309browse

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>

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>

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>

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.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of various function encapsulation methods of classes in js_javascript skillsNext article：Detailed explanation of various function encapsulation methods of classes in js_javascript skills

Related articles

See more