Projet:Accessibilité : étiquettes des champs de formulaire

Libellé

Chaque champ de formulaire est associé à une étiquette qui lui est propre.

Objectifs

• Faciliter la compréhension des données attendues dans les formulaires
• Faciliter la saisie en permettant de sélectionner l'étiquette plutôt que la case à cocher ou le bouton radio

Solutions techniques

Un élément label définit l'information attendue pour chaque champ.

Chaque label est associé au champ concerné grâce à un identifiant identique pour :

• l'attribut id du champ ;
• l'attribut for= du label.

Typiquement, cette association prend la forme :

<label for="identifiant">...</label> <input type="text" id="identifiant" name="...">

On veillera également à ce que le label et le champ du formulaire se succèdent dans l'ordre naturel du contenu, y compris lorsque la page est consultée dans un navigateur ne supportant pas les tableaux. On évitera donc par exemple :

<table> 
   <tr> 
      <td>label 1</td> 
      <td>label 2</td> 
   </tr> 
   <tr> 
      <td>champ 1</td> 
      <td>champ 2</td> 
   </tr> 
</table>

Qui donnera dans un navigateur linéarisant le tableau (navigateur texte) :

label 1 
label 2 
champ 1 
champ 2

Moyens de contrôle

Tester avec un validateur d'accessibilité :

• Ocawa ou
• Acces pour tous

ou cliquer sur une étiquette pour vérifier que le champ associé est sélectionné.

---