1. Accueil
  2. Opquast V3
  3. 85 - Chaque champ de formulaire est associé …

N°85 - Chaque champ de formulaire est associé dans le code source à une étiquette qui lui est propre.

Objectif

Faciliter la compréhension des données attendues dans les formulaires.

Permettre aux aides techniques d'accessibilité de restituer les champs de formulaires en les associant systématiquement à une étiquette indiquant leur rôle et la nature de la saisie attendue.

Faciliter la saisie en permettant de sélectionner le champ via un clic sur son étiquette aussi bien que sur le champ lui-même (particulièrement en cas de case à cocher ou de case radio).

Solution technique

Donner à chaque champ de formulaire une étiquette qui lui soit explicitement associée :

  • si l'étiquette est visible, sous la forme d'un élément label doté d'un attribut for reprenant la valeur de l'attribut id affecté au champ, par exemple :

<label for="nom1">Nom de famille :</label>

<input id="nom1" type="text" name="nom">

  • si l'affichage de l'étiquette n'est pas souhaitée, sous la forme d'un attribut title du champ lui-même.

Le recours à une étiquette <label for="…"> masquée via les styles CSS est déconseillé au profit de l'attribut title du champ.

Moyen de controle

Pour chaque champ de formulaire :

  • Vérifier, en regardant le code source ou à l'aide de Firebug, que l'attribut for, propre à l'élément label, ainsi que l'attribut id du champ ont exactement le même contenu. Si les valeurs de ces deux attributs sont effectivement identiques, l'étiquette (label) est bien associée au champ (input).
  • Dans le cas où aucune étiquette n'est visible dans le site, vérifier que chaque champ de formulaire est doté d'un attribut title.

Dans les deux cas, vérifier enfin que l'étiquette décrit effectivement le rôle du champ ou la nature de l'information qui doit y être saisie. Cette bonne pratique ne peut donc être automatisée mais nécessite un examen manuel de chaque formulaire

Lorsqu'une étiquette label est présente mais masquée à l'affichage avec les propriétés CSS display ou visibility, la bonne pratique 139 exigeant que les contenus nécessaires aux lecteurs d'écran ne leur soient pas dissimulés est, du coup, invalidée.

Crée le
23 juin 2014

Testez et faites reconnaître vos compétences

Logo Opquast Certfied

Opquast Certified est un test sur 1000 points permettant de vérifier le degré de maîtrise des meilleures pratiques du Web

Découvrir

Retrouvez cette fiche dans « Qualité Web »

Livre Qualité Web

En savoir +

Version numérique offerte pour l’achat de la version papier