Bonne pratique No 162 - Accessibilité - Niveau2

Vous êtes ici : : Accueil > Bonnes pratiques > Fiche n^o162

Fiche bonne pratique N°162- Niveau2- Rubrique accessibilité

Libellé

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

Objectif

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

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

Mettre en application cette bonne pratique

Opquast est un service édité par Temesis. Les bonnes pratiques Opquast sont forgées dans l'atelier Opquast(FR).