Un champ de formulaire sans libellé correctement associé est l'erreur la plus fréquente que nous rencontrions sur les formulaires de contact, les étapes de commande et les écrans de connexion. Le libellé est souvent présent, correctement positionné visuellement au-dessus ou à côté du champ de saisie, mais il n'est pas techniquement associé à ce champ dans le code source. Un lecteur d'écran annonce alors le champ comme « éditable, vide » sans expliquer sa fonction.
Le problème survient généralement parce qu'un libellé et un champ de saisie forment visuellement une unité, mais le développeur (ou le système de création) n'a pas établi de lien technique entre les deux. Pour un utilisateur voyant, cela n'a aucune importance : il voit simplement le libellé. Pour quelqu'un qui utilise un lecteur d'écran, cette proximité visuelle n'existe pas. Ce qui compte, c'est l'association dans le code, et elle manque bien souvent, même sur des sites qui ont l'air professionnels.
Trois variantes de la même erreur
La forme la plus fréquente est le libellé présent à l'écran mais indépendant du champ dans le code, sans association technique. La deuxième forme est l'utilisation d'un texte d'espace réservé dans le champ lui-même comme seule explication : dès que l'utilisateur commence à taper, ce texte disparaît, et un lecteur d'écran ne traite pas toujours un espace réservé comme un véritable libellé. La troisième forme apparaît surtout avec les icônes : un champ de recherche avec seulement une loupe, ou un bouton avec seulement un pictogramme, sans texte qu'un lecteur d'écran puisse lire.
Ces variantes ont en commun que l'erreur n'est généralement pas intentionnelle. Personne ne conçoit un formulaire pour le rendre inaccessible. Cela se produit parce qu'un libellé est visuellement correct et que le créateur suppose que c'est suffisant, alors que l'association technique est une étape distincte qui est facilement omise, notamment sous la pression du temps ou avec un modèle qui n'a pas été initialement conçu dans une optique d'accessibilité.
Pourquoi cela a plus d'importance qu'il n'y paraît
Un formulaire est souvent le moment où un visiteur souhaite vraiment accomplir quelque chose : finaliser une commande, créer un compte, prendre contact. Si le libellé manque précisément à ce moment-là, le processus s'interrompt pour une partie de vos visiteurs, tandis que le reste du site fonctionne bien. Les autorités de surveillance et les auditeurs examinent donc souvent d'abord ce type de goulots d'étranglement dans les formulaires, car ils ont directement une incidence sur la possibilité pour quelqu'un d'utiliser un service.
De plus, cette erreur se propage facilement. Un libellé sans association dans un seul modèle pour un champ d'adresse réapparaît souvent sur des dizaines de pages à la fois, car le même composant est réutilisé partout. Une association manquée à la base affecte ainsi l'ensemble de l'étape de commande ou de tout l'écran de connexion.
Comment tester et où un scan automatique atteint ses limites
Un scan automatique détecte bien certaines de ces erreurs : il vérifie si un libellé est techniquement associé à un champ et si un champ de saisie ne possède aucun nom. Ce qu'un scan a du mal à évaluer, c'est si un libellé est correct sur le plan du contenu, si un espace réservé comme seule explication est suffisamment clair, et si l'ordre de lecture pour un lecteur d'écran semble logique. C'est précisément pourquoi nous indiquons dans chaque rapport ce qu'un test automatique couvre et ne couvre pas ; de cette façon, vous savez ce qui doit encore être examiné manuellement.
Si vous souhaitez vous faire une première impression, le test le plus simple consiste à parcourir le formulaire en utilisant uniquement le clavier et à vérifier que chaque champ reçoit un nom clair lorsque vous y accédez en utilisant la touche de tabulation. Pour une analyse plus approfondie, y compris l'étape de commande et la connexion, cela aide le scan complet qui va au-delà de la page d'accueil pour voir où les libellés manquent ou ne sont pas associés à leur champ.
Ce qu'un widget de superposition ne peut pas résoudre ici
Un widget d'accessibilité plaqué sur le site ne peut pas corriger une association manquante entre un libellé et un champ ; cette association se trouve dans le code source lui-même et doit y être corrigée. C'est l'une des raisons pour lesquelles nous ne vendons pas de superpositions : elles cachent ce type d'erreurs à l'oeil, mais un lecteur d'écran ne remarque rien de différent.
La solution elle-même est généralement d'envergure limitée : le développeur associe l'étiquette au champ, remplace un texte d'espace réservé servant d'étiquette par une véritable étiquette, ou ajoute un texte invisible à un bouton d'icône. Ce n'est pas une refonte majeure, mais c'est du travail qui doit être effectué de manière ciblée, par formulaire et par modèle. Dans la base de connaissances avec des explications par sujet vous lisez comment ces erreurs et erreurs comparables se rapportent aux exigences de EN 301 549.
Après la réparation : documenter et surveiller
Une étiquette que vous corrigez maintenant peut disparaître à nouveau lors de la modification suivante du modèle, par exemple lorsqu'un concepteur remet en forme le formulaire sans revérifier l'association. C'est pourquoi une correction ne doit pas seulement être résolue techniquement, mais aussi incluse dans le plan d'amélioration, afin qu'il soit clair qui en est responsable et quand elle sera revérifiée. Comment nous organisons ce contrôle et cette répétition est expliqué sur la page sur la façon dont l'évaluation est effectuée.
Si vous vous demandez si vos propres formulaires contiennent cette erreur, c'est souvent quelque chose que vous pouvez détecter en quelques minutes de navigation au clavier. Si vous le souhaitez de manière structurée et avec une liste priorisée, cela commence par l'analyse rapide gratuite, ou consultez d'abord la FAQ sur ce qu'une analyse contrôle et ne contrôle pas.