Les formulaires, point de rupture de la plupart des sites
Cette page fait partie de L'accessibilité numérique.
Là où tout se joue
Un formulaire est le seul endroit où l’utilisateur doit produire quelque chose, et non simplement lire. C’est aussi celui où l’échec est total : on ne « lit à moitié » un formulaire, on le soumet ou on renonce.
C’est pourquoi la thématique Formulaires est l’une des plus fournies du référentiel, et pourquoi le tunnel de commande d’une boutique s’audite intégralement, états d’erreur compris.
Les six règles
1. Chaque champ a une étiquette, visible et associée
Une étiquette est un <label> relié au champ. Un
placeholder n’est pas une étiquette : il disparaît à la saisie,
son contraste est généralement insuffisant, et il n’est pas restitué de
manière fiable.
2. L’étiquette est pertinente et proche du champ
Elle décrit ce qui est attendu — « Adresse électronique » plutôt que « Courriel ? » — et se place immédiatement avant son champ, dans le même bloc.
3. Les champs de même nature sont regroupés
Un <fieldset> avec sa <legend>. C’est
indispensable pour les groupes de boutons radio et de cases à cocher : sans
légende, la question à laquelle on répond n’est pas restituée.
4. La finalité du champ est déclarée
L’attribut autocomplete — name,
email, tel, postal-code — permet le
remplissage automatique. C’est un critère du référentiel, et un gain de
conversion.
5. Les erreurs sont nommées et reliées
« Formulaire invalide » n’aide personne. Un message utile dit quel champ et ce qui est attendu : « Adresse électronique : le format attendu est nom@domaine.fr ». Il doit être relié programmatiquement au champ, et rappelé en tête de formulaire pour être trouvable.
6. L’aide à la saisie précède l’erreur
Indiquer le format attendu avant la soumission évite l’erreur plutôt que de la signaler. Les champs obligatoires sont signalés autrement que par la seule couleur.
Beaucoup de formulaires accessibles renvoient vers une page d’erreur qui ne l’est pas : erreurs non reliées aux champs, valeurs saisies perdues, focus resté en haut de page. L’utilisateur se retrouve bloqué exactement là où il avait besoin d’aide.
C’est pour cela que le référentiel impose d’auditer tous les états d’un processus à étapes multiples. Sur ce site, la page d’erreur du formulaire de contact est générée côté serveur et vérifiée à chaque mise en ligne au même titre que les pages statiques.
Les erreurs classiques à traquer
- étiquette remplacée par un
placeholder; - astérisque de champ obligatoire jamais explicité ;
- groupes de boutons radio sans
fieldsetnilegend; - message d’erreur affiché en rouge, et en rouge seulement ;
- compte à rebours ou expiration de session sans possibilité de prolonger ;
- CAPTCHA sans solution d’accès alternative ;
- bouton intitulé « Envoyer » quand trois formulaires cohabitent dans la page.