Quand un formulaire signale une erreur, explique-t-il clairement quel champ est concerné et comment le corriger ?
Critère officiel 11.11 — Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?
Pourquoi c'est important
Un champ encadré en rouge sans texte explicatif exclut les personnes daltoniennes (qui ne perçoivent pas la différence de couleur) et les personnes aveugles (qui n'ont pas de retour visuel). Même pour un voyant, « Erreur de saisie » sans précision oblige à deviner quel format était attendu.
Exemples concrets
Ce qui est conforme
Après soumission avec erreur, un résumé apparaît en haut du formulaire : « 2 erreurs ont été trouvées. 1. Téléphone : saisissez uniquement des chiffres, sans espace. 2. Email : l'adresse doit contenir un @. » Chaque erreur est un lien qui amène directement au champ concerné.
Ce qui pose problème
Le formulaire encadre le champ email en rouge sans aucun texte. Une personne daltonienne ne voit aucune différence. Une personne aveugle n'entend aucune information supplémentaire. Les deux doivent deviner quelle est l'erreur et comment la corriger.
Comment agir
Demandez à votre prestataire d'implémenter un résumé des erreurs en haut du formulaire après soumission infructueuse : liste des champs en erreur avec leur nom exact, l'explication du problème et un lien vers le champ à corriger. L'erreur ne doit jamais être signalée uniquement par la couleur — cette exigence doit figurer dans tout cahier des charges de formulaire.
Règles clés
- Le message : identifie le champ, décrit l'erreur, ET suggère la correction.
- Exception : si suggérer la correction compromet la sécurité (mot de passe).
- Exemples : format d'email, format de date, longueur minimale.
Erreurs fréquentes
- Message identifiant l'erreur sans suggérer de correction ('Champ invalide')
- Message trop technique ('Format YYYY-MM-DD requis' sans explication)
Exemples de code
erreur sans suggestion
✗ Non conforme<p role="alert">Adresse e-mail invalide.</p>L'erreur est identifiée mais aucune aide pour corriger. L'utilisateur doit deviner ce qui ne va pas.
erreur avec suggestion
✓ Conforme<p role="alert">
Adresse e-mail invalide.
Vérifiez le format : nom@domaine.fr
(exemple : marie.dupont@exemple.fr)
</p>Erreur identifiée, explication et exemple concret fournis. L'utilisateur sait exactement comment corriger.
Référence WCAG : 3.3.3