Chaque étiquette de champ est-elle placée juste au-dessus ou à gauche de son champ, sans espace ambigu ?
Critère officiel 11.4 — Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés (hors cas particuliers) ?
Pourquoi c'est important
Les personnes malvoyantes qui agrandissent leur écran voient souvent une portion réduite de la page. Si une étiquette et son champ sont séparés par un grand espace, ou si l'étiquette d'un champ semble visuellement plus proche d'un autre champ, elles peuvent associer l'étiquette au mauvais champ et saisir leurs informations au mauvais endroit.
Exemples concrets
Ce qui est conforme
Dans le formulaire de contact, chaque étiquette est placée directement au-dessus de son champ avec un espacement minimal. À 200% de zoom, l'étiquette « Votre message » et son grand champ de texte restent visibles ensemble dans la même zone de l'écran.
Ce qui pose problème
Le formulaire affiche les étiquettes à gauche et les champs à droite, séparés par un large espace blanc. À 200% de zoom, l'étiquette « Email » apparaît seule sur la moitié gauche de l'écran — et le champ suivant (téléphone) semble lui correspondre visuellement.
Comment agir
Demandez à votre prestataire de positionner chaque étiquette directement au-dessus ou à gauche immédiat de son champ. Test de vérification : utilisez le zoom à 200% (Ctrl+Plus) et vérifiez que chaque étiquette est clairement associée sans ambiguïté à son champ.
Règles clés
- Label et champ adjacents — immédiatement au-dessus ou à gauche du champ.
- Distance minimale — pas de grandes zones vides entre label et input.
- Vérifier que label et champ restent visibles ensemble à 200% de zoom.
Erreurs fréquentes
- Label très éloigné du champ (plusieurs centaines de pixels)
- Layout en colonnes avec grand espace entre label et input
- Label positionné en absolute loin de son champ
Exemples de code
label éloigné du champ
✗ Non conforme<label for="nom">Nom</label>
<div style="height:300px"></div>
<input id="nom" type="text">300px entre label et champ — jamais visibles ensemble à fort zoom.
label adjacent
✓ Conforme<div class="field">
<label for="nom">Nom</label>
<input id="nom" type="text">
</div>
<style>
.field { display:flex; flex-direction:column; gap:0.25rem; }
</style>Label immédiatement au-dessus, séparé d'un espace minimal. Toujours visibles ensemble.
Référence WCAG : 3.3.2