Explication détaillée des compétences aria-label et aria-labelledby applications_javascript de Bootstrap-js tutoriel-php.cn

Explication détaillée des compétences aria-label et aria-labelledby applications_javascript de Bootstrap

WBOY

Libérer： 2016-05-16 15:22:10

original

2334 Les gens l'ont consulté

aria-label

Dans des circonstances normales, le composant de saisie du formulaire a une étiquette correspondante. Lorsque le composant de saisie obtient le focus, le lecteur d'écran lira le texte dans l'étiquette correspondante.
Tel que :

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

Copier après la connexion

Mais si nous ne définissons pas d'étiquette pour la zone de saisie, lorsqu'elle obtient le focus, le lecteur d'écran lira la valeur de l'attribut aria-label, et l'aria-label n'aura pas d'effet visuel.
Tel que :

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

Copier après la connexion

attribut aria-labelledby

Lorsque le texte d'étiquette souhaité existe déjà dans d'autres éléments, vous pouvez utiliser aria-labelledby et définir sa valeur sur l'identifiant de tous les éléments lus. Comme suit :
Lorsque ul obtient le focus, le lecteur d'écran lira : "Sélectionnez votre 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>

Copier après la connexion

PS : Si un élément a à la fois aria-labelledby et aria-label, le logiciel de lecture d'écran lira en premier le contenu de aria-labelledby

Le contenu ci-dessus est lié aux applications aria-label et aria-labelledby de Bootstrap présentées par l'éditeur. J'espère que le partage de cet article pourra aider tout le monde. En même temps, merci pour votre soutien continu. Site Web de la Maison des scripts.