Formulaires accessibles : étiquettes, messages d'erreur et aides à la saisie

Les formulaires accessibles ne coûtent presque rien à produire. Repris après coup, ils coûtent une journée de développement.

Voici les règles qui comptent vraiment : les étiquettes, les messages d'erreur, et les aides à la saisie. Avec, à chaque fois, ce que ça change pour vos conversions.

Tester mon formulaire de contact

Pourquoi les formulaires concentrent les défauts

Un formulaire enchaîne des composants interactifs, des états, des messages conditionnels. Chaque étape peut casser.

Or c'est précisément là que se joue votre chiffre d'affaires. Devis, contact, réservation, commande : tout passe par un formulaire.

Autrement dit, l'accessibilité et la conversion visent ici exactement les mêmes corrections.

Règle 1 : une étiquette visible, reliée au champ

Chaque champ porte un libellé, affiché au-dessus, et relié au champ dans le code.

Cette liaison produit deux effets. Le lecteur d'écran annonce le libellé quand le focus arrive. Et le clic sur le libellé place le curseur dans le champ.

Le faux ami : le libellé à l'intérieur du champ

Il paraît élégant, et il disparaît dès la première lettre saisie.

L'utilisateur ne sait plus ce qu'il remplit. Les personnes qui reprennent un formulaire interrompu perdent tout repère.

Gardez cette indication comme complément, jamais comme libellé principal.

Règle 2 : des messages d'erreur qui parlent

La bordure rouge seule ne dit rien. Elle échoue au critère du contraste, et à celui de l'information portée par la couleur.

Un message correct répond à trois questions :

• quel champ pose problème, nommé explicitement ;
• ce qui ne va pas, en langage courant ;
• ce qu'il faut faire pour corriger.

Comparez. « Erreur » ne sert à personne. « L'adresse e-mail doit contenir un arobase » règle la situation en une seconde.

Où placer le message

Juste sous le champ concerné, jamais uniquement en haut de page. Et un résumé en tête de formulaire quand plusieurs champs échouent.

Le focus doit se déplacer vers la première erreur après la validation. Sans cela, une personne au clavier ne saura pas que quelque chose a échoué.

Règle 3 : les aides à la saisie

Une aide s'affiche avant l'erreur, pas après. Elle évite la faute plutôt que de la signaler.

Champ	Aide utile
Téléphone	Le format attendu, avec un exemple
Mot de passe	Les règles affichées dès le départ, pas au refus
Date	Le format, et une saisie au clavier possible
Champ obligatoire	Une mention écrite, pas seulement un astérisque rouge

La dernière ligne revient dans presque tous mes audits. L'astérisque seul ne suffit pas s'il n'est expliqué nulle part.

Règle 4 : le remplissage automatique

Les champs classiques doivent annoncer leur nature dans le code : nom, e-mail, téléphone, adresse.

Le navigateur propose alors les valeurs enregistrées. Le gain est réel pour les personnes à mobilité réduite, et pour tout le monde sur mobile.

Cette correction prend cinq minutes et réduit vos abandons de formulaire.

Règle 5 : grouper ce qui va ensemble

Une série de boutons radio ou de cases à cocher forme un ensemble. Cet ensemble porte sa propre question.

Sans regroupement déclaré, le lecteur d'écran annonce les options sans jamais dire de quoi il s'agit.

Le cas typique : « Comment souhaitez-vous être recontacté ? », suivi de trois options. La question doit être rattachée au groupe.

Ce que les formulaires accessibles changent sur vos conversions

Chaque règle ci-dessus vise une difficulté d'usage réelle. Or ces difficultés touchent tout le monde, pas seulement les personnes en situation de handicap.

Correction	Effet sur l'usage
Étiquette toujours visible	Moins d'erreurs de saisie sur mobile
Message d'erreur explicite	Moins d'abandons après un refus
Aide affichée avant la faute	Formulaire rempli du premier coup
Remplissage automatique	Saisie plus rapide, surtout au téléphone

C'est la raison pour laquelle je commence toujours par là. Des formulaires accessibles se financent en partie tout seuls.

Ce qu'il ne faut jamais faire

• désactiver le bouton d'envoi tant que le formulaire est incomplet, sans dire pourquoi ;
• imposer une limite de temps sans possibilité de la prolonger ;
• valider automatiquement au changement d'une liste déroulante ;
• vider les champs déjà remplis après une erreur.

Ce dernier point fait perdre plus de clients que tous les autres réunis.

Le test en deux minutes

Ouvrez votre formulaire de contact. Remplissez-le uniquement au clavier, puis validez-le vide une première fois.

Trois observations suffisent. Les libellés restent-ils visibles ? L'erreur est-elle écrite ? Le focus se déplace-t-il vers elle ?

Le protocole complet figure dans notre article sur la navigation au clavier.

Et si le formulaire vient d'une extension ?

La plupart des extensions sérieuses produisent aujourd'hui des formulaires accessibles par défaut. Le problème vient souvent du thème, qui redéfinit les styles.

Testez avant d'accuser l'extension. Le focus supprimé et le libellé masqué viennent presque toujours de la feuille de style du site.

Pour situer ces critères dans l'ensemble, consultez notre guide des critères RGAA.

Lancer le dépistage gratuit

Dépistage automatique : il couvre environ 30 % des critères du référentiel. Il ne remplace pas un audit manuel et ne vaut pas attestation de conformité.

Votre tunnel de commande vous inquiète ? Écrivez-nous, nous le testons de bout en bout.

Références : tutoriel formulaires du W3C et portail de l'accessibilité numérique de l'État.