Unit 2 · HTML: structure and meaning
Why placeholder text is not a label
A placeholder disappears the moment someone starts typing, and many screen readers skip it. Give every field a real <label>, linked to the input with matching for and id.
The mix-up
What people often think
“Placeholder text is enough of a label.”
What the tutor says
Placeholder text disappears as soon as someone types, and many screen readers skip it. Give every field a real <label>.
How it works
Once a placeholder is gone, people filling in a long form forget what the field was for, especially when they come back to fix an error. Placeholder text is also usually pale grey, which is hard to read.
A linked label stays visible, is read aloud when the field gets focus, and makes the label text clickable, which gives everyone a bigger target on a phone.
Side by side
<input type="email" placeholder="Email"><label for="email">Email</label>
<input id="email" type="email" name="email">Close cousins of this mix-up
The tutor watches for these in the same lesson.
“Placeholder text is a label.”
Placeholders vanish when someone types and many screen readers skip them. Give each field a label with a matching for and id.
Practise it with a tutor watching
Links, images and forms
Build a contact form that works for everyone, including people who cannot see it.
Free, no account needed.