Figma
CursorLABELS ERREURS ET
Prérequis
- Notions de HTML sémantique (label, input, fieldset)
- Projet React ou HTML avec validation côté client et serveur
- Extension navigateur ou lecteur d’écran pour tests rapides (NVDA, VoiceOver)
- Maquette Figma ou design system avec états champ normal, erreur et succès
Un formulaire inaccessible bloque la conversion et expose au risque juridique. Les erreurs les plus fréquentes — placeholder à la place du label, message d’erreur uniquement en rouge, pas d’annonce aux lecteurs d’écran — se corrigent avec des patterns simples dès la maquette.
Cadrer le formulaire en maquette Figma
Chaque champ a un label visible, un hint optionnel et un état erreur avec message textuel explicite (« L’email doit contenir un @ »).
Ordre de tabulation logique : haut vers bas, gauche vers droite. Groupez les champs liés (adresse) dans un fieldset avec legend.
Indiquez les champs obligatoires avec « obligatoire » dans le label ou aria-required, pas uniquement un astérisque sans légende globale.
Associer labels, erreurs et aria-live
Utilisez <label for="email"> courriel</label> et <input id="email" name="email" type="email" autocomplete="email" required>. Pour les cases à cocher, préférez un label cliquable englobant ou une paire for/id.
Instructions permanentes : aria-describedby pointant vers l’id du hint. Ne dupliquez pas le label dans le placeholder. À la validation, posez aria-invalid="true" sur les champs en échec et référencez le message d’erreur via aria-describedby.
Résumé en tête de formulaire : <div role="alert" aria-live="assertive"> pour les erreurs bloquantes après soumission. Succès asynchrone : zone aria-live="polite" annonçant « Votre message a été envoyé ».
Bouton submit explicite (« Envoyer ma demande ») plutôt que « OK ». Désactivez le double envoi (aria-busy ou disabled pendant le POST).
Implémenter avec Cursor sans régression
Ajoutez une rule `.mdc` accessibilité formulaires avec exemples /. Demandez à l’agent de composer un composant en citant @W3C ou votre design system.
Vérifiez le focus visible (outline ou ring) sur tous les interactifs. Ne supprimez pas outline sans substitut conforme.
Testez au clavier seul : tab, shift+tab, espace sur checkbox, entrée sur submit. Puis une passe lecteur d’écran sur un parcours erreur volontaire.
Erreurs fréquentes
Label masqué en CSS display:none alors qu’il devrait être visible ou sr-only correctement.
aria-live sur tout le document : annonces intempestives à chaque frappe.
Erreur uniquement via toast disparu avant lecture par la technologie d’assistance.
Captcha sans alternative accessible ou champ obligatoire non signalé avant submit.
Ce qu’il faut retenir
Label visible + for/id sur chaque champ.
Erreur textuelle + aria-invalid + aria-describedby.
aria-live pour succès et résumé d’erreurs post-submit.
Design Figma et code React partagent les mêmes états.
FAQ
Polite pour les mises à jour non urgentes (compteur de caractères). Assertive pour les erreurs bloquantes après soumission. Évitez assertive en boucle sur chaque validation inline.
Non en principe : le label visible suffit. aria-label ne remplace le visible que pour les icônes-boutons sans texte.
Clavier + lecteur d’écran sur un scénario complet + axe DevTools pour détecter les labels manquants. La recette experte reste recommandée avant mise en prod grand public.