Champs de formulaire sans libellé

Un champ sans étiquette associée laisse l'utilisateur deviner ce qu'on attend de lui, et le lecteur d'écran n'annonce rien d'utile.

Qui est concerné

• Personnes aveugles, dont le lecteur d'écran annonce « zone de saisie » sans nom
• Personnes avec troubles cognitifs, qui perdent le repère dès que le placeholder disparaît

Pourquoi c'est important

Un placeholder n'est pas un libellé : il s'efface dès qu'on saisit, ne se traduit pas correctement et contraste souvent mal. Les WCAG (1.3.1 et 4.1.2) imposent un libellé programmatiquement lié au champ. C'est la cause numéro un d'abandon de formulaire pour les personnes handicapées.

Comment le tester vous-même

1. Cliquez sur le texte du libellé : le focus doit se placer dans le champ (preuve que le lien for/id existe).
2. Naviguez au lecteur d'écran : chaque champ doit être annoncé avec son intitulé.
3. Vérifiez qu'aucun champ ne s'appuie uniquement sur un placeholder.

Comment corriger

Associez une étiquette <label for="id"> à chaque champ, ou ajoutez un aria-label. Un placeholder ne suffit pas : il disparaît à la saisie.

<input type="email" placeholder="Votre email">

<label for="email">Votre adresse email</label>
<input type="email" id="email" name="email">

Critères de référence

Plainpied détecte ce défaut automatiquement et le localise page par page. La conformité totale combine détection automatique et vérifications humaines : voir notre méthode.