← Toutes les règles

Formulaires

Les champs de formulaire ont besoin d’une étiquette

• Règle: label
• Gravité: Critique
• Niveau WCAG A

Pourquoi c’est important

Un champ sans étiquette est annoncé « zone d’édition, vide ». On entend qu’un champ existe mais pas ce qu’il attend, et le message d’erreur à l’envoi ne l’expliquera pas davantage.

Comment corriger

1. Ajoutez un <label for="…"> dont la valeur correspond à l’id du champ.
2. Si la maquette manque de place, utilisez aria-label avec la formulation du texte indicatif.
3. Un texte indicatif n’est pas une étiquette : il disparaît à la première frappe et échoue souvent au contraste.

Dans le balisage

<input type="email" id="email">

<label for="email">Email</label>
<input type="email" id="email">

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

• 4.1.2 Nom, rôle et valeur (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur label (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.