Formulaires accessibles
Labels, instructions, messages d’erreur actionnables (thématique 11).
Chapitres
- 0:00Situations du quotidien (nouvelle fenêtre, YouTube)
- 0:19Formulaires accessibles (nouvelle fenêtre, YouTube)
- 0:38Labels (nouvelle fenêtre, YouTube)
- 1:26Erreurs (nouvelle fenêtre, YouTube)
- 2:01Checklist (nouvelle fenêtre, YouTube)
- 2:17À retenir (nouvelle fenêtre, YouTube)
- 2:31CTA (nouvelle fenêtre, YouTube)
Transcription
Texte intégral de la narration de l’épisode.
Situations du quotidien
Les formulaires sont là où l’accessibilité se joue souvent pour de vrai : inscription, paiement, contact, candidature. Placeholder à la place du label, erreur floue, obligatoire seulement en rouge : trois frictions qui excluent. La thématique Formulaires du RGAA pose des règles simples et exigeantes.
Formulaires accessibles
Dans le RGAA, les formulaires ont leur thématique. L’idée centrale : chaque champ a une étiquette pertinente, les groupes sont clairs, les boutons disent ce qu’ils font, et les erreurs aident vraiment à corriger. Ce n’est pas de la cosmétique : c’est le contrat entre ton interface et la personne qui saisit.
Labels
Regarde les deux champs. À gauche, seul un placeholder « Email » : dès qu’on tape, l’indication disparaît. À droite, un label visible « Adresse e-mail » qui reste ancré, avec le champ clairement associé. C’est le socle du critère 11.1, avant même d’ouvrir le code. En code, c’est la même idée. Un placeholder n’est pas un label : il disparaît dès qu’on saisit, et il n’est pas toujours restitué correctement. Un label visible, associé avec for et id, reste ancré. Tu peux enrichir avec autocomplete quand c’est pertinent. Visuellement, un bon champ se lit sans devinette. L’étiquette est là. L’obligation est écrite, pas seulement colorée. Une instruction de format aide avant l’erreur. Tu réduis la charge cognitive pour tout le monde, y compris sans lecteur d’écran.
Erreurs
Les messages d’erreur font la différence. « Erreur » en haut de page sans dire lequel ni pourquoi, c’est un mur. Mieux : identifier le champ, expliquer le problème en langage simple, suggérer une correction si c’est utile, et ne pas effacer ce qui était déjà saisi. L’utilisateur doit pouvoir finir le parcours, pas recommencer à zéro. Sur le rendu, la différence saute aux yeux. À gauche, un bandeau « Erreur » vague, et un champ en dessous sans lien clair. À droite, le champ est mis en évidence, et le message dit quoi corriger, avec un exemple. L’erreur devient une aide, pas un mur.
Checklist
Avant de livrer un formulaire, vérifie : labels visibles et associés, groupes cohérents, boutons qui disent l’action, erreurs localisées et actionnables. Si tu ne coches qu’une case, commence par les labels : c’est le levier le plus rentable.
À retenir
À retenir. Labels visibles. Instructions claires. Erreurs utiles. Et un test clavier plus lecteur d’écran sur le parcours complet. Prochain épisode : structurer l’information avec des titres et des listes.
CTA
Reprends ton formulaire le plus critique. Inventorie labels et erreurs. Teste clavier et lecteur d’écran. Pour analyser une page, rendez-vous sur rgaa-checker.com.
Approfondir dans le guide
Cet épisode aborde ces critères du RGAA 4.1.2. Ouvre leur fiche pour la méthode de test détaillée, les cas particuliers et les exemples.
Passer à l’action
La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.