Formulaires accessibles : le point de rupture de la plupart des sites
Un formulaire est l'endroit où le site demande quelque chose à l'utilisateur — et donc l'endroit où un obstacle a des conséquences immédiates : commande abandonnée, démarche non effectuée, droit non exercé. C'est aussi la thématique où les erreurs sont les plus faciles à corriger.
Les étiquettes
Chaque champ doit porter une étiquette visible et associée dans le code. L'association permet deux choses : le lecteur d'écran annonce l'intitulé quand le focus entre dans le champ, et un clic sur l'étiquette place le focus dans le champ — ce qui sert aussi les personnes au pointage imprécis.
Un texte affiché dans le champ disparaît dès la première frappe. L'utilisateur qui revient vérifier sa saisie ne sait plus ce qu'on lui demandait. Et le contraste de ces textes est presque toujours insuffisant.
C'est une tendance esthétique qui produit une non-conformité et une mauvaise expérience pour tout le monde.
Les champs obligatoires
Le caractère obligatoire doit apparaître dans l'intitulé, pas seulement par un astérisque coloré ou une bordure. Un astérisque peut compléter l'information ; il ne doit pas la porter seul.
Les regroupements
Un ensemble de boutons radio ou de cases à cocher a besoin d'un intitulé commun. Sans lui, le lecteur d'écran annonce « Oui » puis « Non » sans jamais dire de quelle question il s'agit. La correction consiste à grouper les champs et à donner au groupe sa légende.
Les messages d'erreur
| Exigence | Ce que cela implique |
|---|---|
| Identifiée | L'erreur est signalée en texte, pas seulement par une couleur |
| Localisée | Le message est associé au champ concerné, et annoncé avec lui |
| Explicite | Le message dit la correction attendue, pas seulement l'échec |
| Annoncée | Une erreur apparaissant sans rechargement est restituée sans voler le focus |
La différence entre « Format incorrect » et « La date doit être écrite au format jour/mois/année, par exemple 14/07/1985 » ne coûte rien à la rédaction, et change tout à l'usage. Voir le handicap cognitif.
L'aide à la saisie
Déclarer la finalité des champs courants — nom, adresse électronique, téléphone, adresse postale — permet au navigateur et aux outils d'assistance de les remplir automatiquement. Le bénéfice est direct pour les personnes à motricité réduite et pour celles qui ont des difficultés de saisie.
C'est l'un des apports des WCAG 2.1 — voir les WCAG 2.1.
La vérification en six points
- Chaque champ a une étiquette visible et associée.
- Les champs obligatoires le signalent dans leur intitulé.
- Les groupes de choix ont une légende.
- Les messages d'erreur sont textuels, localisés et explicites.
- Les champs courants déclarent leur finalité.
- Le formulaire entier se remplit et se valide au clavier seul.
Poursuivre
Pour la thématique la plus coûteuse du référentiel, voyez la vidéo accessible.