Ajouter des étiquettes claires aux contrôles de formulaire  
Point de contrôle 12,4 de priorité 2 WAI / WCAG 1.0
 
 
Description du problème

La page contient un formulaire dont les contrôles ne sont pas explicitement associés aux éléments LABEL.

 
 
Procédure de réparation

Trois étapes sont nécessaires pour associer une étiquette à un contrôle :

  1. attribuez un identifiant unique au contrôle à l'aide de l'attribut ID ;
  2. créez un élément LABEL contenant l'étiquette texte ou image à associer au contrôle ;
  3. ajoutez l'attribut FOR à l'élément LABEL avec l'ID du contrôle comme valeur.

Exemple :

<form action="submit" method="post">
   <label for="firstname">First name: </label>
   <input type="text" id="firstname">
   <label for="lastname">Last name: </label>
   <input type="text" id="lastname">
</form>
 
 
Explication du problème

Lorsqu'un utilisateur voyant normalement parcoure un formulaire à l'aide de la touche de tabulation, il peut facilement associer les contrôles aux étiquettes placés près d'eux. Cependant, pour une personne utilisant un lecteur d'écran, cette information est insuffisante. Il est nécessaire de spécifier explicitement quelle étiquette est associée à quel contrôle de formulaire.

La meilleure façon pour y arriver consiste à utiliser l'élément LABEL. Celui-ci doit contenir l'étiquette et le contrôle de formulaire actuels ; son attribut FOR doit contenir l'ID du contrôle.

Un élément LABEL peut ne pointer que vers un seul contrôle ou plusieurs éléments LABEL peuvent pointer vers le même contrôle. Cette fonctionnalité n'étant pas disponible sur tous les lecteurs d'écran, il est recommandé d'attribuer un seul élément LABEL à chaque contrôle.

Il est possible d'associer implicitement une étiquette à un contrôle : insérez à la fois l'étiquette et le contrôle comme contenu de l'élément LABEL. Bien que cette technique soit proposée dans la spécification HTML 4.01 Recommandation, elle n'est pas encore prise en charge par tous les lecteurs d'écran.