Associer chaque champ à un label
Le placeholder ne remplace pas un label. Un libellé visible reste disponible avant, pendant et après la saisie et fournit un nom exploitable par les technologies d’assistance.
- Utilisez <label for> avec un id de champ correspondant.
- Gardez un libellé visible pour les informations importantes.
- Ajoutez une aide séparée lorsque le format attendu mérite une explication.
Signaler les contraintes avant l’erreur
Les champs obligatoires, formats et limites doivent être compréhensibles avant l’envoi. Un utilisateur ne devrait pas découvrir les règles uniquement après un message d’échec.
- Indiquez clairement les champs obligatoires.
- Utilisez les bons types HTML : email, tel, url, date lorsque pertinent.
- Ajoutez autocomplete pour les données courantes quand cela aide.
Rendre les erreurs faciles à corriger
Après validation, le message doit expliquer le problème et rester associé au champ concerné. Une synthèse en haut peut compléter les messages locaux pour les formulaires longs.
- Placez un message précis près du champ invalide.
- Conservez les valeurs déjà saisies lorsque c’est possible.
- Déplacez le focus vers la synthèse d’erreurs si plusieurs champs sont concernés.
Checklist pratique
- Chaque champ important possède un label visible.
- Les contraintes sont annoncées avant l’envoi.
- Le parcours fonctionne au clavier.
- Les erreurs sont spécifiques et associées au bon champ.
- Le focus reste visible et logique.
Continuer avec les ressources liées
Conclusion
Un formulaire accessible est généralement plus simple pour tout le monde. Les mêmes améliorations réduisent les erreurs, rassurent l’utilisateur et facilitent la conversion.