Signup and contact forms on landing pages often show a hint inside the field and no label at all. It looks clean. It is also the first thing to check.
The check
View the page source and look at each <input>. For each one, ask: is there a <label> tied to it?
<label for="email">Email</label>
<input id="email" type="email" name="email">
The for value on the label must match the id on the input. A label wrapped around the input also works, though MDN notes that while common browser and screen reader combinations support this implicit association, not all assistive technologies do. The explicit for/id pair is the safer default.
What the standards say
MDN's page on the label element explains the point: the label text is programmatically associated with the input, so a screen reader reads the label when the user focuses the field. A hint that exists only as a visual placeholder does not give you that association by itself.
The W3C's Understanding page for WCAG 3.3.2, Labels or Instructions, states the requirement as: labels or instructions are provided when content requires user input.
- MDN, the label element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label
- W3C, Understanding 3.3.2: https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions
Quick test
- Search the source for
<inputand count them. - For each, find the matching
<label for=...>or a wrapping label. - Check that no two inputs share the same
id, since the label would point to the wrong one. - Tab through the form with a screen reader on and listen to what is said at each field. If you hear only "edit text", the label is missing.
One thing to notice
Once a user types in a field, a placeholder disappears. If the only description of the field was the placeholder, the person has to delete their text to remember what it was for. A visible label stays put.
What does the first field on your signup form say when you tab into it?
Top comments (0)