Chaque entrée nécessite un véritable label
Associez les étiquettes et les champs pour que les toucher et les lire fonctionnent.
Chaque entrée nécessite un véritable label est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Why Labels Matter
A form field with no name is a mystery box. A real label tells every user, sighted or not, exactly what to type. 🏷️
The label Element
The label element is HTML's built-in way to name a field. The browser, screen readers, and tap targets all understand it for free.
Connect With for and id
The cleanest link is for on the label matching the input's id. Now they are officially paired.
<label for="email">Email</label>
<input id="email" type="email">IDs Must Be Unique
The id you point to has to be unique on the page. Two inputs sharing one id quietly breaks the pairing.
Wrapping Also Works
You can also wrap the input inside the label. No id needed, since nesting makes the connection clear.
<label>Email
<input type="email">
</label>Bigger Click Target
A connected label gives users a larger click area. Tapping the text focuses or checks the field, which helps shaky hands and small screens.
Screen Readers Read It
When focus lands on a paired input, a screen reader speaks the label first. Without it, users hear only the field type.
title Is Not Enough
A title attribute may show on hover, but it is unreliable on touch and keyboard. It is no substitute for a real label.
Checkboxes Need Labels Too
Checkboxes and radios feel obvious visually, but a label is what makes them tappable and announced. Never leave them bare.
<input id="terms" type="checkbox">
<label for="terms">I agree</label>Visible Beats Hidden
Keep labels visible when you can. Sighted users with cognitive load benefit just as much as screen reader users do.
When You Must Hide It
If a search box has no room for text, hide the label with a visually-hidden class, never display none, so it still reaches assistive tech.
Quick Check
How does a label know which input it names?
Recap
Every input needs a real label, linked by for and id or by wrapping. That one habit makes forms tappable, readable, and clear. ✅
Questions Fréquemment Posées
La leçon « Chaque entrée nécessite un véritable label » est-elle gratuite ?
Oui — le texte complet de « Chaque entrée nécessite un véritable label » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Chaque entrée nécessite un véritable label » ?
Associez les étiquettes et les champs pour que les toucher et les lire fonctionnent. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Chaque entrée nécessite un véritable label » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Chaque entrée nécessite un véritable label
- Un placeholder n’est pas une étiquette
- Regrouper les champs avec fieldset et legend
- Texte d’aide et champs obligatoires annoncés