Share

Approfondir

Qualité Web le livre

Livre Qualité Web

Acheter

67 - In the source code, each field in the form is associated with a label that is specific to it.

Objectif
  • Facilitate the understanding of the data expected in forms.
  • Allow technical accessibility aids to render the fields in forms by systematically attaching a label to them, indicating their role and the nature of the expected input.
  • Simplify input by allowing users to select the field by clicking on either its label or the field itself (especially in the case of a checkbox or a radio button).
  • Improve the accessibility of content for people with disabilities.
Mise en œuvre

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 (placeholder), sous la forme d'un attribut aria-label ou aria-labelledby.

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

Contrôle

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 (placeholder), vérifier que chaque champ de formulaire est doté d'un attribut aria-label ou aria-labelledby.

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

Découvrez la certification Opquast

Rejoignez la communauté des certifiés Opquast. Plus de 5000 professionnels formés à la qualité Web. Au programme une formation en ligne de 14h, un examen de 1h30, un badge et un score à mettre sur votre cv et votre profil linkedin.

Commander en ligne