Champ de formulaire sans étiquette : critère RGAA 11.1, impact et correction

C'est quoi

Une étiquette (<label>) décrit ce qu'un champ attend. Pour qu'elle soit utile aux technologies d'assistance, elle doit être associée programmatiquement au champ, pas seulement posée à côté visuellement.

L'association se fait de deux façons :

L'attribut for du <label> reprend l'id du champ.
Ou le champ est imbriqué à l'intérieur du <label>.

Un placeholder n'est pas une étiquette. Il disparaît dès que l'utilisateur tape, n'est pas toujours lu par les lecteurs d'écran, et son contraste est souvent trop faible. Le placeholder complète l'étiquette, il ne la remplace jamais.

Qui est touché

Les personnes aveugles : le lecteur d'écran annonce « zone de saisie » sans dire à quoi elle sert.
Les personnes à mobilité réduite : une étiquette correctement liée facilite l'activation du champ.
Tout le monde : sur un formulaire mal étiqueté, le taux d'erreur de saisie augmente.

Impact business

Le formulaire est l'endroit où se joue la conversion : contact, devis, inscription, paiement. Un champ inutilisable au lecteur d'écran, c'est une conversion impossible pour l'utilisateur concerné.

Les champs de formulaire sans étiquette figurent parmi les erreurs récurrentes de l'enquête WebAIM Million, qui les relève sur une part importante des formulaires analysés.

Au-delà du handicap, un formulaire lisible sert tout le monde. La recherche sur les tunnels de paiement montre que les formulaires trop longs font abandonner. Une étiquette explicite, elle, réduit les erreurs de saisie et le besoin de recommencer.

Formule : visiteurs du formulaire x taux de complétion actuel = conversions. Chaque friction retirée agit directement sur ce taux.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan détecte les champs sans <label> associé et les <label> dont le for ne pointe vers aucun champ.
Manuel : clique sur le texte de l'étiquette. Si le curseur se place dans le champ, l'association est correcte.
Lecteur d'écran : tabule de champ en champ. Chaque champ doit être annoncé avec un intitulé clair.

Comment corriger

Avant - HTML

<input type="email" name="email" placeholder="Email">

Après - HTML

<label for="email">Adresse email</label>
<input type="email" name="email" id="email"
       placeholder="ex : prenom@exemple.fr">

L'id du champ et le for du <label> doivent être identiques et uniques dans la page. L'étiquette reste visible ; le placeholder ne sert plus que d'exemple de format.

Sur WordPress, les formulaires viennent souvent d'une extension (Contact Form 7, WPForms, Gravity Forms). Vérifie dans les réglages du formulaire que chaque champ a bien un libellé activé, et pas seulement un placeholder.

Questions fréquentes

Un placeholder peut-il remplacer une étiquette ?

Non. Le placeholder disparaît à la saisie, n'est pas fiable au lecteur d'écran et manque souvent de contraste. Il complète l'étiquette visible.

Comment faire si le design ne veut pas d'étiquette visible ?

L'étiquette doit exister dans le code. Si elle ne peut pas être visible, masque-la visuellement avec une classe dédiée tout en la gardant accessible. Ne jamais la supprimer du HTML.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Champ de formulaire sans étiquette