Champs de formulaire sans étiquette

L'absence d'étiquettes sur les champs de formulaire se produit lorsque les champs de saisie, cases à cocher, boutons radio, listes déroulantes et zones de texte ne disposent pas d'une étiquette associée de manière programmatique. Le critère RGAA 11.1 (correspondant aux WCAG 1.3.1 et 4.1.2, niveau A) exige que chaque champ de formulaire possède une étiquette qui lui est reliée.

Une étiquette visible à côté d'un champ ne suffit pas. L'étiquette doit être associée au champ soit via un élément `<label>` avec un attribut `for` correspondant, soit en enveloppant le champ dans le `<label>`, soit en utilisant `aria-label` ou `aria-labelledby`. Sans cette association programmatique, les lecteurs d'écran annoncent le champ comme un « champ de texte sans étiquette », laissant l'utilisateur deviner quelle information est attendue.

Ce problème est extrêmement courant sur les sites qui utilisent le texte placeholder comme seule étiquette. Bien que les placeholders puissent fournir des indices, ils disparaissent lorsque l'utilisateur commence à taper, ne laissant aucune indication sur la fonction du champ. Ils ont également un contraste insuffisant dans la plupart des navigateurs et ne sont pas annoncés de manière cohérente par tous les lecteurs d'écran. Se reposer uniquement sur les placeholders échoue à la fois aux critères RGAA 11.1 et 11.10.

Pour les utilisateurs de lecteurs d'écran, un champ de formulaire sans étiquette est un jeu de devinettes. Le lecteur d'écran peut annoncer « zone de texte » ou « champ de saisie » sans aucune indication sur ce qu'il attend -- un nom, un email, un numéro de téléphone ou un mot de passe. Les utilisateurs doivent soit deviner, soit essayer de déduire la fonction du contexte environnant, ce qui est peu fiable et chronophage.

Les utilisateurs de commande vocale (par ex. Dragon NaturallySpeaking) dépendent aussi des étiquettes visibles car ils utilisent le texte de l'étiquette pour cibler les champs par la voix. Sans étiquette, ils ne peuvent pas dire « cliquer email » pour focaliser le champ email. Les utilisateurs d'écran tactile bénéficient également des étiquettes, car cliquer sur une étiquette focalise son champ associé, offrant une cible de clic plus grande.

Des étiquettes manquantes dans les formulaires critiques comme la connexion, l'inscription, le paiement et le contact empêchent directement les utilisateurs d'accomplir des actions essentielles. Ce n'est pas seulement un problème d'accessibilité -- cela augmente aussi les taux d'abandon de formulaire pour tous les utilisateurs qui trouvent les champs non étiquetés déroutants.

Scrutia inspecte chaque contrôle de formulaire de vos pages et vérifie l'existence d'une association programmatique avec une étiquette -- que ce soit via un élément `<label>` avec un attribut `for` correspondant, un `<label>` englobant, ou des attributs ARIA (`aria-label`, `aria-labelledby`). Il signale aussi les champs qui reposent uniquement sur le texte placeholder sans étiquette persistante. Chaque constatation inclut l'emplacement du champ, son état actuel et un extrait de code montrant comment ajouter l'étiquette correcte.