← Toutes les règles

Formulaires

Un champ, une étiquette

• Règle: form-field-multiple-labels
• Gravité: Modéré
• Niveau WCAG A

Pourquoi c’est important

Quand plusieurs <label> pointent vers le même champ, navigateurs et lecteurs d’écran ne s’accordent pas sur celui à annoncer : certains lisent le premier, d’autres le dernier, d’autres les concatènent.

Comment corriger

1. Fusionnez la formulation dans un seul <label>.
2. Déplacez les aides et messages d’erreur dans un élément distinct référencé par aria-describedby.
3. Gardez la mention « obligatoire » dans cette étiquette unique plutôt que dans une seconde.

Dans le balisage

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

<label for="email">Email (required)</label>
<input id="email" required>

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 :

• 3.3.2 Étiquettes ou instructions (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur form-field-multiple-labels (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.