Maison > Article > interface Web > Explication détaillée des compétences aria-label et aria-labelledby applications_javascript de Bootstrap

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

WBOYoriginal: 2016-05-16 15:22:102270parcourir

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>

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>

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de diverses méthodes d'encapsulation de fonctions de classes dans les compétences js_javascriptArticle suivant：Explication détaillée de diverses méthodes d'encapsulation de fonctions de classes dans les compétences js_javascript

Articles Liés

Voir plus