Étiquettes ou instructions

Ce que le critère demande

Lorsque l’utilisateur est invité à fournir une saisie — champ texte, case à cocher, bouton radio, liste déroulante, sélecteur de date, sélecteur de fichier — il doit y avoir une étiquette ou une instruction indiquant ce qui est attendu. L’étiquette peut être un texte visible, un élément <label>, un aria-label ou un aria-labelledby ; les instructions peuvent inclure le format attendu, les valeurs autorisées ou des exemples.

Les champs obligatoires, les formats attendus (« JJ/MM/AAAA ») et les contraintes particulières (« 8 caractères minimum, majuscules et minuscules ») relèvent tous de ce critère.

Comment satisfaire ce critère

• Associer chaque <input>, <textarea> et <select> à un <label for="…"> dont l’attribut for correspond à l’id de la saisie.
• Ne jamais utiliser uniquement le texte de substitution comme étiquette — les placeholders disparaissent lors de la mise au focus et présentent un faible contraste.
• Indiquer les champs obligatoires de façon visible (astérisque, le mot « obligatoire » ou aria-required="true") et expliquer la convention en haut du formulaire.
• Préciser le format attendu dès le départ, pas après que l’utilisateur a commis une erreur : « Date (JJ/MM/AAAA) » ou « Numéro de téléphone, ex. 01-23-45-67-89 ».
• Pour les groupes de cases à cocher ou de boutons radio, utiliser <fieldset> et <legend> pour libeller le groupe.
• Pour les saisies avec icône seule ou les barres de filtre, utiliser aria-label pour donner un nom explicite.

Erreurs courantes

• Des formulaires où le texte de substitution est la seule étiquette, qui disparaît dès que l’utilisateur commence à saisir.
• Des champs obligatoires marqués uniquement par des astérisques rouges sans association programmatique.
• Des saisies de date de naissance attendant un format particulier qui n’est communiqué qu’après l’échec de la validation.
• Des champs de recherche libellés avec une icône loupe sans nom accessible.
• Des formulaires de connexion où les champs nom d’utilisateur et mot de passe sont positionnés visuellement à côté des étiquettes, mais sans association programmatique.

Pourquoi c’est important

Les formulaires sont le lieu où la plupart des utilisateurs effectuent des transactions — inscription, paiement, contact, support, prise de rendez-vous. Des formulaires sans étiquette ou avec des étiquettes insuffisantes excluent totalement les utilisateurs de lecteurs d’écran, qui ne peuvent pas savoir quelle donnée chaque case requiert. Ils échouent également pour les utilisateurs dyslexiques, qui perdent le contexte dès que le texte de substitution disparaît, et pour les utilisateurs ayant des troubles cognitifs, qui bénéficient d’indications de format dès le départ.

Les étiquettes sont aussi essentielles pour les gestionnaires de mots de passe, le remplissage automatique et les logiciels de commande vocale, qui utilisent tous le texte des étiquettes pour associer les champs. Un formulaire bien étiqueté profite à tout le monde.