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

Suivez la formation et passez la certification Opquast 100% en ligne.

La formation Maîtrise de la qualité en projet Web permet aux professionnels du web de travailler plus efficacement au sein d’équipes multidisciplinaires. Apprenez un vocabulaire, un cadre de travail et un état d’esprit communs pour produire des produits web de meilleure qualité et améliorer l’expérience utilisateur.

  • Une formation en ligne de 14 heures en autonomie, disponible 24h/24, 7j/7
  • Pour tous les professionnels du Web : marketing, commerciaux, chefs de projet, designers, développeurs, ingénieurs informatiques.
  • Une approche multidisciplinaire : SEO, accessibilité, écoconception…
    Pour tous les professionnels, débutants comme confirmés.
  • Un contenu reposant sur des bonnes pratiques et un vocabulaire adopté par une large communauté de professionnels
  • Des principes de conception centrés sur la diversité des utilisateurs
  • Déjà plus de 11.500 certifiés