Formulaires accessibles : Le guide complet pour ne perdre aucun utilisateur
En Bref : L'essentiel à retenir
- Un formulaire accessible nécessite des labels pour chaque champ afin d'être utilisable par les lecteurs d'écran.
- Les messages d'erreur doivent être explicites et associés aux champs concernés, en évitant de se baser uniquement sur la couleur pour les personnes atteintes de daltonisme.
- La navigation au clavier doit être optimisée, garantissant que tous les champs sont accessibles et que la soumission est possible avec la touche Entrée.
- Pour l'accessibilité, privilégiez des solutions CAPTCHA invisibles ou des outils modernes, car les CAPTCHA visuels sont souvent inaccessibles aux personnes aveugles.
Le formulaire est le point critique de tout site web. C'est là que se fait la conversion (achat, contact, inscription). C'est aussi là que se concentrent 50% des erreurs d'accessibilité.
Les 3 règles d'or du formulaire accessible
1. Chaque champ doit avoir un Label
C'est la base absolue. Un champ <input> sans <label> est invisible pour un lecteur d'écran.
- Mauvaise pratique : Utiliser le
placeholdercomme label. Le placeholder disparaît quand on écrit, ce qui pose des problèmes de mémoire à court terme. - Bonne pratique : Lier explicitement le label au champ avec l'attribut
for.
<label for="email">Votre email</label>
<input type="email" id="email" name="email">
2. Les erreurs doivent être explicites
"Erreur dans le formulaire" ne suffit pas. L'utilisateur doit savoir où et quoi.
- Lier l'erreur au champ : Utilisez
aria-describedbypour que le lecteur d'écran lise l'erreur quand le focus est sur le champ. - Ne pas utiliser que la couleur : Une bordure rouge ne suffit pas pour un daltonien. Ajoutez une icône ou un texte "Erreur".
3. Le clavier est roi
Testez votre formulaire sans souris.
- Pouvez-vous atteindre tous les champs avec
Tab? - L'ordre est-il logique ?
- Pouvez-vous soumettre avec
Entrée?
Cas particuliers
Les champs obligatoires
Ne mettez pas juste un astérisque rouge (*). Ajoutez une mention textuelle "Obligatoire" (visible ou masquée pour les lecteurs d'écran) ou utilisez l'attribut required.
Les CAPTCHA
C'est souvent le cauchemar de l'accessibilité. Les CAPTCHA visuels ("cliquez sur les feux rouges") sont bloquants pour les aveugles.
- Solution : Privilégiez des solutions invisibles (Honeypot) ou des outils modernes comme Turnstile de Cloudflare qui ne demandent pas d'interaction complexe.
Conclusion
Un formulaire accessible est souvent un formulaire plus simple et plus performant pour tout le monde. En soignant vos labels et vos messages d'erreur, vous réduisez la frustration et augmentez mécaniquement votre taux de complétion.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
Le contraste entre la couleur du texte et la couleur de son arrière-plan doit être suffisamment élevé (4.5:1 pour le texte normal, 3:1 pour le grand texte).
Le contraste des composants d'interface et des éléments graphiques porteurs d'information doit être d'au moins 3:1 par rapport à leur arrière-plan.
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.