Un <label> donne à un contrôle de formulaire un nom accessible et une zone de clic plus grande. Il existe deux façons de les associer, et le faire est essentiel pour l'accessibilité.
for + id (explicit)Email address
La propriété for du label correspond à l'id de l'input. Cela fonctionne même s'ils ne sont pas adjacents dans le balisage.
<label>
Email address
<input type="email" />
</label>
L'input est imbriqué dans le label — pas besoin d'id.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
Un placeholder disparaît lorsque l'utilisateur tape et n'est pas annoncé de manière fiable — ne l'utilisez jamais comme seul label.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Utilisez aria-label (ou aria-labelledby) uniquement lorsqu'un label visible n'est vraiment pas possible.
Les labels correctement associés sont l'une des pratiques d'accessibilité les plus impactantes pour les formulaires — ils donnent à chaque contrôle un nom pour la technologie d'assistance et élargissent les zones de clic pour tout le monde.
Préférez un vrai <label>; tombez sur aria-label uniquement si nécessaire, et ne comptez jamais sur placeholder comme label.