<label>
Dire à l'utilisateur ce que tu attends dans un champ, et le rendre cliquable
<label> — L'étiquette de champ
La balise <label> associe un texte descriptif a un champ de formulaire. Deux méthodes : association explicite via for/id, ou association implicite en englobant le champ dans le <label>.
Quand l'utiliser
Chaque champ de formulaire visible doit avoir un <label>. Pas d'exception. Un champ sans label est un champ inaccessible.
Ce que tu gagnes
Accessibilité : les lecteurs d'écran lisent le label quand le champ reçoit le focus. Sans label, l'utilisateur ne sait pas ce que tu lui demandes. En prime, cliquer sur le label donne le focus au champ, zone de clic élargie.
Exemple de code
<!-- Explicit association (recommended) -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<!-- Implicit association (wrapping) -->
<label>
Email:
<input type="email" name="email">
</label>Pour aller plus loin
- Le laissez-passer A38 — partie 1 — les bases des formulaires accessibles
- Beware of the Leopard — part 1 — the English version
- WHATWG —
<label> - W3C — WCAG 1.3.1 Info and Relationships
- MDN —
<label>