Try it yourself
Four ways to label the same email field. A label is what a screen reader announces when somebody lands on the box, and what a browser uses to decide what to autofill.
Which one labels it for everybody?
-
The commonest mistake, because it looks right. A placeholder is not a label: it disappears the moment somebody types, so anyone interrupted mid-form cannot see what the box was for, and it is the lowest-contrast text on the page.
-
Genuinely valid — wrapping the field in the label associates them, no ids needed. It gets awkward the moment your layout needs the label and the field in different containers.
-
This is the one. The for attribute and the id match, so the association survives any layout you put them in. It is announced by screen readers, it tells browsers what to autofill, and clicking the words puts the cursor in the box.
-
Screen readers are fine with this. Everybody else gets an unlabelled box — sighted users, people with memory or attention difficulties, and anyone returning to a half-filled form. A visible label serves more people than an invisible one.
Pick a line. Every one of them has an answer.
Show me the answer
<label for="email">Email address</label> <input id="email" type="email">
This is the one. The for attribute and the id match, so the association survives any layout you put them in. It is announced by screen readers, it tells browsers what to autofill, and clicking the words puts the cursor in the box.
The written version
Form fields that nobody can identify →
How to check your own site for this, what to change, and how to confirm it worked.
Now the real thing
Run this check on your own site.
The same check, plus twenty-nine others, against your actual pages. Free, no account, about a minute.