AccessiaDes champs de formulaire n'ont pas d'étiquette
Un champ dont l'intitulé n'apparaît qu'en texte grisé à l'intérieur perd son sens dès qu'on commence à saisir.
Qui est gêné
Les personnes aveugles, qui n'entendent aucun intitulé. Mais aussi tout le monde : un formulaire long dont les intitulés ont disparu devient impossible à relire avant envoi.
D'où vient le problème
Le thème pour les formulaires natifs, une application tierce pour les formulaires personnalisés.
Comment corriger
- Associez un élément label à chaque champ, avec un attribut for pointant vers l'identifiant du champ.
- Gardez l'étiquette visible au-dessus ou à côté du champ, pas seulement à l'intérieur.
- Si le design impose de n'afficher que le texte d'exemple, ajoutez au minimum un aria-label sur le champ.
À savoir. Un attribut placeholder n'est pas une étiquette. Il disparaît à la saisie, son contraste est souvent insuffisant, et il n'est pas annoncé de façon fiable.
Référence
Critères concernés : RGAA 11.1 et 11.2, WCAG 3.3.2.
Identifiant de la règle dans les outils d'analyse :
label.
Accessia détecte ce défaut sur les pages publiques d'une boutique Shopify, indique s'il vient du contenu, du thème ou d'une application tierce, et compte le nombre d'occurrences.