Every Input Needs a Real label
Connect labels and fields so taps and reads work.
Every Input Needs a Real label is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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. ✅
Frequently asked questions
Is the “Every Input Needs a Real label” lesson free?
Yes — the full text of “Every Input Needs a Real label” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Every Input Needs a Real label”?
Connect labels and fields so taps and reads work. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Every Input Needs a Real label” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Every Input Needs a Real label
- Placeholder Is Not a Label
- Grouping Fields With fieldset and legend
- Help Text and Required Fields, Announced