Accessibilité des formulaires web : les erreurs à éviter et les bonnes pratiques

Un formulaire web semble souvent simple à concevoir : quelques champs, un bouton de validation et un message de confirmation. Pourtant, il peut rapidement devenir difficile à utiliser lorsque les informations attendues ne sont pas claires, que les erreurs sont mal signalées ou que les champs ne sont pas accessibles au clavier.

Ces difficultés peuvent empêcher un visiteur de contacter une entreprise, de demander un devis, de créer un compte ou de finaliser un achat.

Les formulaires sont donc un élément essentiel de l’accessibilité numérique. Ils doivent permettre aux utilisateurs de comprendre ce qui leur est demandé, de saisir leurs informations et de corriger leurs erreurs sans difficulté inutile.

Un formulaire accessible ne se limite pas à afficher des champs : il accompagne l’utilisateur tout au long de sa démarche.

Dans cet article, découvrez les erreurs fréquentes, les bonnes pratiques à appliquer et les points à vérifier pour améliorer l’accessibilité de vos formulaires.

1. Pourquoi l’accessibilité des formulaires est-elle si importante ?

Les formulaires sont présents sur presque tous les sites web : formulaire de contact, demande de devis, inscription à une newsletter, création de compte ou paiement en ligne.

Lorsqu’ils sont mal conçus, ils peuvent créer des obstacles pour différents profils d’utilisateurs.

Pour les personnes utilisant un lecteur d’écran

Un lecteur d’écran restitue les informations présentes dans la page. Si un champ ne possède pas de libellé correctement associé, l’utilisateur peut avoir du mal à comprendre quelle information saisir.

Pour les personnes ayant un handicap moteur

Certaines personnes naviguent au clavier ou à l’aide d’un dispositif adapté. Si les champs, les boutons ou les messages d’erreur ne sont pas accessibles avec ces moyens, la démarche peut devenir impossible.

Pour les personnes ayant des difficultés cognitives

Une consigne ambiguë, un formulaire trop long ou un message d’erreur incompréhensible peuvent compliquer la saisie.

Pour tous les utilisateurs

Des champs bien identifiés, des consignes précises et des erreurs faciles à corriger rendent généralement un formulaire plus simple à utiliser.

L’accessibilité ne consiste donc pas seulement à répondre à des exigences techniques : elle contribue aussi à réduire les difficultés rencontrées lors d’une démarche en ligne.

2. Associer correctement chaque champ à son libellé

L’une des erreurs fréquentes consiste à afficher un champ sans libellé clairement associé.

Un texte indicatif placé à l’intérieur du champ, appelé placeholder, ne remplace pas un véritable label. Il peut disparaître pendant la saisie et n’offre pas toujours un repère suffisamment stable.

Exemple de formulaire à améliorer

Un champ affiche uniquement :

« Votre adresse e-mail »

Lorsque l’utilisateur commence à écrire, ce texte disparaît. Il peut alors devenir difficile de se rappeler ce qui était attendu.

La bonne pratique

Utilisez un libellé visible et associé au champ correspondant.

Exemple HTML :

<label for="email">Adresse e-mail</label> <input type="email" id="email" name="email">

L’attribut 'for' du label correspond à l’identifiant 'id' du champ.

Cette association permet notamment aux technologies d’assistance d’identifier correctement le champ. Elle facilite également l’utilisation du formulaire pour les personnes qui cliquent sur le libellé pour sélectionner le champ.

À retenir : privilégiez les libellés persistants et explicites plutôt que des champs identifiés uniquement par un texte indicatif.

3. Indiquer clairement les champs obligatoires

Les utilisateurs doivent savoir quelles informations sont indispensables pour envoyer le formulaire.

Lorsque les champs obligatoires ne sont pas identifiés, ils risquent de découvrir trop tard qu’une information manque.

Exemple d’erreur

Un formulaire contient huit champs, mais rien n’indique lesquels sont obligatoires.

Après avoir cliqué sur « Envoyer », l’utilisateur reçoit plusieurs messages lui demandant de compléter les champs manquants.

La bonne pratique

Indiquez clairement les champs obligatoires, idéalement au début du formulaire ou à proximité des champs concernés.

Par exemple :

• Nom — obligatoire
• Adresse e-mail — obligatoire
• Téléphone — facultatif
• Message — obligatoire

Si vous utilisez un astérisque, expliquez sa signification, par exemple : « Les champs marqués d’un astérisque (*) sont obligatoires ».

La distinction ne doit pas reposer uniquement sur la couleur.

Lorsque cela correspond au fonctionnement du formulaire, l’attribut HTML required peut également être utilisé. Il ne remplace toutefois pas les indications visibles et les messages d’erreur compréhensibles.

4. Rédiger des consignes simples et précises

Un formulaire accessible doit expliquer clairement les informations attendues.

Des consignes vagues ou des formats difficiles à deviner peuvent entraîner des erreurs de saisie.

Exemple

Une date doit être renseignée, mais aucun format n’est indiqué.

L’utilisateur peut saisir 12/10/2026, 2026-10-12 ou un autre format, sans savoir lequel est accepté.

Comment améliorer les consignes ?

• Indiquez le format attendu lorsqu’il n’est pas évident.
• Expliquez les contraintes particulières.
• Précisez les informations réellement nécessaires.
• Évitez les abréviations peu compréhensibles.
• Placez les instructions à proximité du champ concerné.

Par exemple : « Saisissez votre date de naissance au format JJ/MM/AAAA ».

Pour les champs complexes, comme un numéro de dossier ou un identifiant, expliquez également comment retrouver l’information demandée.

L’objectif est de prévenir les erreurs plutôt que de laisser l’utilisateur les découvrir au moment de la validation.

5. Afficher des messages d’erreur compréhensibles

La gestion des erreurs est l’un des points les plus importants de l’accessibilité des formulaires.

Un message comme « Erreur de saisie » ou « Champ invalide » ne permet pas toujours de comprendre ce qui doit être corrigé.

Exemple de message insuffisant

« Une erreur est survenue. »

L’utilisateur sait que quelque chose ne fonctionne pas, mais il ne sait ni où se trouve le problème ni comment le résoudre.

Un message plus utile

« L’adresse e-mail saisie ne semble pas valide. Vérifiez sa forme, par exemple nom@exemple.fr. »

Un bon message d’erreur doit, lorsque cela est possible :

• identifier le champ concerné ;

expliquer le problème ;

• indiquer comment le corriger ;
• être compréhensible sans connaissance technique.

Il est également important que l’erreur soit associée au champ concerné dans le code et que les technologies d’assistance puissent en prendre connaissance.

La couleur peut aider à signaler une erreur, mais elle ne doit pas être le seul moyen de la transmettre.

6. Faciliter la correction des erreurs

Signaler une erreur ne suffit pas. L’utilisateur doit pouvoir la retrouver et la corriger facilement.

Le problème des formulaires difficiles à corriger

Après validation, certains formulaires affichent un message général en haut de la page sans indiquer précisément quels champs posent problème.

D’autres effacent toutes les informations déjà saisies, obligeant l’utilisateur à recommencer.

Les bonnes pratiques

Pour faciliter la correction :

• affichez des messages à proximité des champs concernés ;
• présentez, si nécessaire, un résumé des erreurs en début de formulaire ;
• permettez de retrouver facilement chaque champ en erreur ;
• conservez les informations déjà saisies lorsque cela est possible ;
• rendez les messages accessibles aux technologies d’assistance ;
• vérifiez que le focus est géré de manière cohérente après la validation.

Pour un formulaire long, un résumé des erreurs avec des liens vers les champs concernés peut faire gagner du temps.

L’objectif est simple : aider l’utilisateur à corriger le problème sans perdre sa progression.

7. Vérifier que le formulaire fonctionne au clavier

Toutes les personnes n’utilisent pas une souris pour naviguer sur Internet.

Un formulaire doit donc pouvoir être parcouru et utilisé au clavier.

Comment effectuer un premier test ?

1. Placez-vous au début de la page.
2. Utilisez la touche Tabulation pour passer d’un élément interactif au suivant.
3. Vérifiez que chaque champ et chaque bouton peut être atteint.
4. Assurez-vous que l’élément actif est visuellement identifiable.
5. Remplissez le formulaire et essayez de l’envoyer.
6. Provoquez volontairement une erreur pour vérifier le parcours de correction.

Les champs personnalisés, les sélecteurs de date, les listes déroulantes et les boutons peuvent nécessiter des vérifications supplémentaires.

Un formulaire qui fonctionne uniquement avec une souris présente un obstacle important pour les personnes qui naviguent autrement.

8. Organiser les champs pour rendre le formulaire plus compréhensible

Un formulaire trop dense peut être difficile à parcourir, surtout lorsqu’il mélange plusieurs types d’informations.

L’organisation des champs doit suivre une logique compréhensible.

Quelques recommandations

• Regroupez les champs qui concernent le même sujet.
• Utilisez des titres de section explicites.
• Placez les consignes au bon endroit.
• Évitez de demander des informations qui ne sont pas nécessaires.
• Présentez les champs dans un ordre logique.
• Expliquez les choix proposés dans les listes et les boutons radio.

Lorsque plusieurs champs forment un groupe, comme plusieurs choix liés à une même question, des éléments HTML adaptés tels que fieldset et legend peuvent aider à transmettre leur relation.

Un formulaire de contact peut, par exemple, distinguer les coordonnées, le sujet de la demande et le message, sans multiplier inutilement les sections.

La simplicité reste importante : un formulaire plus court et mieux organisé peut réduire les erreurs et faciliter la démarche.

9. Ne pas utiliser uniquement la couleur pour signaler une information

Les couleurs sont souvent utilisées pour différencier les champs obligatoires, les erreurs ou les validations réussies.

Cependant, une information transmise uniquement par la couleur peut être difficile à percevoir pour certaines personnes.

Exemple

Un champ devient rouge lorsqu’il est invalide, mais aucun message n’explique le problème.

L’utilisateur doit alors deviner ce qui ne va pas.

La bonne pratique

Associez la couleur à une information complémentaire :

• un message d’erreur explicite ;
• une mention « Obligatoire » ;
• un symbole accompagné d’une explication ;
• un texte de confirmation après l’envoi.

Vérifiez également que le texte, les bordures et les indicateurs visuels offrent un contraste suffisant.

Cette approche rend les états du formulaire plus faciles à comprendre, même lorsque les couleurs ne sont pas bien distinguées.

10. Tester le formulaire dans son ensemble

Un formulaire peut sembler correct visuellement tout en présentant des problèmes techniques.

Par exemple, un champ peut avoir un libellé visible mais mal associé dans le code. Un message d’erreur peut apparaître à l’écran sans être correctement annoncé par un lecteur d’écran.

C’est pourquoi il est important de combiner plusieurs méthodes de vérification.

Une checklist de contrôle

Avant de mettre un formulaire en ligne, vérifiez les points suivants :

• Chaque champ possède un libellé adapté et correctement associé.
• Les champs obligatoires sont identifiés clairement.
• Les formats attendus et les consignes sont compréhensibles.
• Les erreurs sont expliquées et faciles à corriger.
• Les informations saisies sont conservées lorsque cela est possible.
• Le formulaire fonctionne au clavier.
• Le focus reste visible et suit un ordre logique.
• Les groupes de champs sont correctement structurés.
• Les informations ne reposent pas uniquement sur la couleur.
• Le formulaire a été testé avec les technologies d’assistance pertinentes.

Cette checklist constitue un premier niveau de vérification. Elle ne remplace pas l’évaluation complète des critères applicables du référentiel d’accessibilité.

11. Quels outils utiliser pour vérifier l’accessibilité d’un formulaire ?

Les outils automatiques peuvent détecter certains problèmes, comme des champs sans nom accessible ou des erreurs de contraste.

Ils ne permettent toutefois pas de vérifier tous les aspects d’un formulaire.

Pour une analyse plus complète, combinez plusieurs approches :

Les outils automatisés : ils facilitent la détection de certaines anomalies techniques.

Les tests manuels au clavier : ils permettent de vérifier le parcours et l’utilisation des composants interactifs.

Les tests avec un lecteur d’écran : ils aident à comprendre comment les libellés, les consignes et les erreurs sont restitués.

L’inspection du code HTML : elle permet de contrôler les associations entre les champs, les labels et les messages.

Les tests fonctionnels : ils permettent de vérifier les différents scénarios, notamment les saisies incorrectes, les champs obligatoires et la confirmation d’envoi.

Pour les organisations concernées par le RGAA, les contrôles doivent également être réalisés selon la méthode et les critères applicables.

12. Comment intégrer les corrections dans le suivi technique ?

Identifier les problèmes est une première étape. Pour obtenir des améliorations durables, les anomalies doivent ensuite être documentées, corrigées et vérifiées.

Cette démarche est particulièrement utile lorsque plusieurs personnes interviennent sur un site : développeurs, intégrateurs, designers, rédacteurs ou responsables de projet.

Pour chaque anomalie, il est utile de documenter :

• Le problème constaté : par exemple, un champ sans libellé correctement associé.
• La page ou le composant concerné : pour faciliter sa localisation.
• Le comportement observé : ce qui se produit pendant le test.
• La correction attendue : le résultat à obtenir.
• Les critères ou recommandations concernés : selon le référentiel et le contexte du projet.
• Le test de validation : les vérifications à effectuer après correction.

Ces informations peuvent être intégrées dans des tickets de correction pour faciliter le travail des équipes techniques.

Une fois les modifications réalisées, les tests doivent être rejoués afin de vérifier que l’anomalie a été résolue et que la correction n’a pas introduit de nouveaux problèmes.

Cette organisation permet de transformer les résultats d’un audit en actions concrètes et suivies.

Conclusion : un formulaire accessible accompagne l’utilisateur jusqu’au bout

Les formulaires représentent souvent un point décisif dans l’expérience d’un utilisateur. Lorsqu’ils sont difficiles à comprendre ou à utiliser, ils peuvent empêcher une personne de contacter une entreprise, de demander un devis ou de terminer une démarche.

Des libellés correctement associés, des consignes précises, des messages d’erreur utiles et une navigation au clavier fonctionnelle constituent des bases essentielles.

Mais l’accessibilité ne s’arrête pas à la conception. Il faut également tester les formulaires, documenter les problèmes, organiser les corrections et vérifier les résultats.

En intégrant ces pratiques dès la création du site et lors de ses évolutions, vous réduisez les obstacles et facilitez l’utilisation de vos services numériques.

Vos formulaires web sont-ils accessibles ?

InclusiWeb accompagne les organisations à Lyon et en Auvergne-Rhône-Alpes dans l’audit d’accessibilité numérique, l’identification des anomalies, la création et le suivi des tickets de correction ainsi que les tests de validation.

Nous pouvons vous aider à analyser vos formulaires, à prioriser les problèmes et à accompagner vos équipes dans la mise en œuvre des corrections.

Contactez InclusiWeb pour échanger sur votre site et identifier les améliorations adaptées à vos besoins.

Sources et ressources utiles

• RGAA — Critères et tests officiels
• W3C WAI — Tutoriel sur les formulaires accessibles
• W3C WAI — Validation et retours d’erreur dans les formulaires
• Système de Design de l’État — Accessibilité des formulaires

Cet article présente des bonnes pratiques générales et ne constitue pas un audit de conformité. Les contrôles nécessaires dépendent du formulaire, de ses fonctionnalités et du référentiel applicable.