Un formulaire peut sembler simple à remplir avec une souris et une bonne vision, tout en devenant difficile à utiliser lorsque les libellés sont absents, que l’ordre de navigation est confus ou que les erreurs sont signalées uniquement par une couleur.
Un formulaire accessible doit permettre de comprendre ce qui est demandé, de saisir les informations, de repérer une erreur et de savoir comment la corriger, y compris au clavier et avec des technologies d’assistance.
Pourquoi l’accessibilité des formulaires est-elle importante ?
Les formulaires sont souvent au cœur d’un parcours : demande de devis, contact, inscription, réservation ou commande. Lorsqu’un champ est mal identifié ou qu’une erreur n’est pas expliquée clairement, l’utilisateur peut abandonner avant d’avoir terminé.
L’accessibilité vise donc à rendre chaque étape compréhensible et prévisible, sans obliger l’utilisateur à deviner ce qu’il doit faire.
Chaque champ doit avoir un libellé compréhensible
Un champ ne devrait pas être identifié uniquement par un texte placé à l’intérieur de la zone de saisie. Ce texte peut disparaître dès que l’utilisateur commence à écrire et ne remplace pas toujours un véritable libellé associé au champ.
Un libellé clair permet de savoir immédiatement ce qui est attendu : nom, adresse e-mail, numéro de téléphone, message ou autre information nécessaire au parcours.
Comment indiquer qu’un champ est obligatoire ?
Une information importante ne doit pas reposer uniquement sur une couleur ou sur un symbole non expliqué. Si certains champs sont obligatoires, cette règle doit être compréhensible avant ou au moment de la saisie.
Un astérisque peut être utilisé s’il est clairement expliqué, mais une indication textuelle explicite comme “obligatoire” peut être plus facile à comprendre selon le contexte.
Un message d’erreur doit expliquer le problème
Afficher uniquement une bordure rouge autour d’un champ ne suffit pas. L’utilisateur doit pouvoir identifier quel champ pose problème et comprendre ce qui doit être corrigé.
Un bon message d’erreur peut par exemple préciser qu’une adresse e-mail est incomplète, qu’un champ obligatoire est vide ou qu’un format attendu n’a pas été respecté.
Le message doit rester utile et concret, plutôt que d’afficher une formule vague comme “erreur de saisie”.
Les erreurs ne doivent pas dépendre uniquement de la couleur
La couleur peut renforcer visuellement une erreur, mais elle ne devrait pas être le seul signal. Une personne qui distingue difficilement certaines couleurs peut ne pas percevoir la différence entre un état normal et un état en erreur.
Il est préférable de combiner la couleur avec un texte, une icône adaptée ou un autre indice perceptible, tout en associant l’erreur au champ concerné.
L’ordre de navigation au clavier doit rester logique
Un utilisateur qui remplit le formulaire avec la touche Tabulation doit pouvoir passer d’un champ au suivant dans un ordre cohérent.
Le focus clavier doit rester visible et atteindre les champs, cases à cocher, boutons radio, listes, boutons d’envoi et autres contrôles utiles au parcours.
Un formulaire accessible ne doit pas imposer l’utilisation de la souris pour sélectionner une option ou envoyer les données.
Comment aider l’utilisateur à corriger ses erreurs ?
Lorsqu’un formulaire est envoyé avec plusieurs erreurs, il est utile que l’utilisateur comprenne rapidement ce qui s’est passé.
Selon le formulaire, cela peut passer par un résumé des erreurs, des messages placés près des champs concernés et une gestion du focus qui évite de laisser l’utilisateur sans indication après l’envoi.
L’objectif est de réduire les allers-retours inutiles et de permettre une correction claire, étape par étape.
Les instructions doivent être données au bon moment
Si un champ demande un format particulier, une longueur minimale ou une information précise, il vaut mieux expliquer cette contrainte avant que l’utilisateur ne commette l’erreur.
Par exemple, si un numéro doit respecter un format particulier, cette information peut être indiquée à proximité du champ plutôt que révélée uniquement après l’envoi.
Qu’en est-il des cases à cocher et boutons radio ?
Ces contrôles doivent avoir un intitulé compréhensible et une zone d’interaction suffisamment facile à utiliser. Leur état sélectionné ou non sélectionné doit être perceptible et compréhensible.
Ils doivent également pouvoir être utilisés au clavier lorsque cela correspond au comportement attendu du composant.
Comment tester simplement un formulaire ?
Un premier contrôle peut être réalisé en parcourant le formulaire sans souris :
- vérifier que chaque champ possède un libellé compréhensible ;
- naviguer avec Tabulation et Maj + Tabulation ;
- contrôler que le focus reste visible ;
- envoyer volontairement le formulaire avec des champs incomplets ;
- vérifier que chaque erreur est clairement expliquée ;
- contrôler que les erreurs ne dépendent pas uniquement de la couleur ;
- corriger les champs puis envoyer à nouveau le formulaire ;
- tester également sur mobile et avec un affichage agrandi.
Ce test simple ne remplace pas un audit complet, mais il permet déjà de repérer plusieurs obstacles importants.
Que prévoient les WCAG 2.2 ?
Les WCAG 2.2 comprennent plusieurs critères liés à l’identification des champs, aux instructions, aux erreurs de saisie, à la navigation au clavier et à la perception des informations.
Le respect technique des critères doit toutefois être complété par une vérification du parcours réel : un formulaire peut sembler correct sur le papier tout en restant difficile à comprendre ou à utiliser.
Que peut vérifier DOMMAT ?
Dans le cadre d’un audit ou d’un contrôle d’accessibilité, DOMMAT peut examiner les libellés, l’ordre de navigation, le focus clavier, les messages d’erreur, les états des contrôles et le comportement du formulaire dans le périmètre convenu.
Pour aller plus loin, consultez ce que vérifie un audit d’accessibilité web, l’approche Accessibilité DOMMAT, notre article sur la navigation clavier et le focus visible ou celui consacré au daltonisme et aux couleurs accessibles.
Vous pouvez également présenter votre besoin d’accessibilité.