Des formulaires accessibles, et plus simples à remplir pour tout le monde

Le formulaire est souvent la page qui compte le plus : c'est là qu'un visiteur devient un client, un inscrit ou un contact. C'est aussi là que l'on perd le plus de monde. Un champ dont on ne comprend pas ce qu'il attend, un message d'erreur qui n'explique rien, un bouton impossible à atteindre au clavier, et la personne abandonne.

Un formulaire accessible n'est pas un formulaire différent : c'est un formulaire bien construit, plus simple à remplir pour tout le monde.

Chaque champ a un libellé visible#

Le texte d'exemple affiché dans un champ vide ne remplace pas un libellé. Il disparaît dès qu'on commence à écrire, son contraste est souvent trop faible, et de nombreuses technologies d'assistance ne le lisent pas.

<label for="telephone">Téléphone</label>
<input id="telephone" type="tel" autocomplete="tel">

L'attribut for du libellé doit correspondre à l'id du champ. En bonus, cliquer sur le libellé place le curseur dans le champ, ce qui agrandit la zone cliquable sur mobile.

Le bon type et l'autocomplétion#

Le type de champ change le clavier affiché sur mobile : email fait apparaître l'arobase, tel un pavé numérique. L'attribut autocomplete permet au navigateur de proposer les informations déjà enregistrées, ce qui fait gagner un temps précieux à tout le monde, et plus encore aux personnes qui ont des difficultés motrices.

<input id="email" type="email" autocomplete="email">
<input id="code-postal" type="text" inputmode="numeric" autocomplete="postal-code">

Indiquer clairement ce qui est obligatoire#

Un astérisque seul ne suffit pas : il faut expliquer ce qu'il signifie, en haut du formulaire. Côté code, l'attribut required informe à la fois le navigateur et les lecteurs d'écran.

Et si la plupart des champs sont obligatoires, il est souvent plus lisible de signaler plutôt ceux qui sont facultatifs.

Des erreurs qui aident à corriger#

« Champ invalide » ne dit pas quoi faire. Un bon message d'erreur nomme le champ, explique le problème et propose une solution : « Le code postal doit contenir 5 chiffres, par exemple 69003. »

Pour qu'un lecteur d'écran annonce ce message, on le relie au champ :

<label for="cp">Code postal</label>
<input id="cp" type="text" aria-invalid="true" aria-describedby="cp-erreur">
<p id="cp-erreur">Le code postal doit contenir 5 chiffres, par exemple 69003.</p>

Quand le formulaire est envoyé avec des erreurs, placez le focus sur la première d'entre elles, ou sur un récapitulatif en haut de page qui liste chaque problème avec un lien vers le champ concerné.

Grouper les choix liés#

Une série de boutons radio posent une seule question. Sans regroupement, un lecteur d'écran annonce « Oui », « Non » sans dire à quoi ils répondent. Les éléments fieldset et legend règlent le problème :

<fieldset>
  <legend>Souhaitez-vous recevoir notre lettre d'information ?</legend>
  <label><input type="radio" name="lettre" value="oui"> Oui</label>
  <label><input type="radio" name="lettre" value="non"> Non</label>
</fieldset>

Tester en cinq minutes#

Remplissez votre formulaire sans souris, uniquement avec Tab, Maj+Tab, Espace et Entrée. Puis envoyez-le volontairement avec des erreurs. Si vous savez à chaque instant où vous êtes et ce qu'on attend de vous, vous avez déjà réglé l'essentiel.

Codanalyst repère automatiquement les champs sans libellé, les contrastes insuffisants et les attributs manquants sur tous vos formulaires. Analysez votre site pour obtenir la liste des corrections.