Placeholder Is Not a Label
Why disappearing hints fail real users.
Placeholder Is Not a Label is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 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.
The Tempting Shortcut
It is tempting to drop hint text in a field and skip the label. But a placeholder is a hint, not a name. ⚠️
It Disappears
The moment someone starts typing, the placeholder vanishes. Now there is nothing left to say what the field was for.
<input type="text" placeholder="Full name">Memory Burden
Users with memory or attention challenges have to remember the hint after it is gone. A persistent label removes that load.
Low Contrast by Default
Placeholder text is usually light gray, which often fails contrast rules. Low-vision users may not read it at all.
Looks Filled In
Gray hint text can read as an already-filled value. People skip the field, then a required error surprises them.
Inconsistent for Screen Readers
Screen reader support for placeholder as a name is patchy and varies by browser. You cannot rely on it being announced.
Use Both, Not Either
Placeholders are fine as extra hints, like a format example. Pair them with a real label, never use them alone.
<label for="phone">Phone</label>
<input id="phone" placeholder="555-0100">Format Examples Shine Here
A placeholder is great for a format example like a date pattern. The label still carries the field's actual name.
Floating Labels
Floating labels slide up when you type, keeping the name visible. They are a real label, just animated, so they pass.
Test by Filling It
Quick check: type into the field. If you can no longer tell what it wants, the placeholder was doing a label's job.
WCAG Backs This Up
WCAG's Labels or Instructions criterion expects a clear, persistent name. Placeholder-only fields routinely fail audits.
Quick Check
Why is a placeholder a poor replacement for a label?
Recap
A placeholder is a fading hint, not a name. Keep a real label and use placeholders only for extra format help. 💡
Frequently asked questions
Is the “Placeholder Is Not a Label” lesson free?
Yes — the full text of “Placeholder Is Not a 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 “Placeholder Is Not a Label”?
Why disappearing hints fail real users. 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Placeholder Is Not a 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.