Picto thématique

Règle n° 75 - Chaque étiquette de formulaire est visuellement rattachée au champ qu'elle décrit.

Pour que l’utilisateur puisse immédiatement repérer l’étiquette explicative de chaque champ, son emplacement ne doit pas prêter à confusion.

#Formulaires #Conception #Accessibilité

Objectif

  • Permettre aux utilisateurs d'identifier sans ambiguïté les champs de formulaire et la nature des informations à saisir.
  • Prévenir les erreurs de saisie.
  • Faciliter et accélérer l'usage du formulaire.
  • Améliorer l’accessibilité des contenus aux personnes handicapées

Mise en œuvre

Veiller à ce que l'étiquette visible de chaque champ de formulaire soit affichée à proximité immédiate du champ concerné, afin que le rapport entre ceux-ci puisse être perçu sans ambiguïté.

Éviter les mises en forme de formulaire entraînant la présence d'un espace vide important entre un champ et son étiquette, ou un positionnement inhabituel de l'étiquette telle qu'une étiquette placée en-dessous du champ, ou une étiquette de case à cocher placée au dessus de celle-ci.

Contrôle

Pour chaque formulaire

  • S'assurer que chaque étiquette de formulaire est affichée à proximité immédiate du champ concerné sur toutes les tailles d'écran (attention au mobile);
  • Vérifier que l'étiquette occupe une position prévisible : au-dessus ou à gauche d'un champ sauf pour les champs input type radio et checkbox où elle peut se trouver à droite ou à gauche du champ.

La proximité immédiate est une mesure à préciser selon le contexte mais elle est de l'ordre d'une trentaine de pixels maximum pour une étiquette placée à gauche du champ, d'un interligne pour une étiquette placée au-dessus du champ et de quelques pixels pour l'étiquette d'une case radio ou à cocher.

Auteur Opquast - Consulter la licence