Labels are not placeholders
By Sofia Andersson, . 6 minute read.
A placeholder looks like a label until the moment someone starts to type. This post covers what goes wrong, and the small amount of markup that avoids it.
The text disappears
A placeholder is replaced by the value as soon as there is one. Someone who is interrupted, or who tabs back to check an earlier field, has nothing left to tell them what the field was for. People who use screen magnification see only a small part of the page and lose the prompt entirely.
The contrast is too low
Placeholder text is usually drawn in a lighter color so it looks like a hint. That lighter color often fails the 4.5:1 minimum for text. A real label uses the same color as the rest of the page text, which already passes.
If a field needs a hint, write the hint next to the field and connect it with
aria-describedby.
The markup that works
Put a label directly before the control and connect the
two with for and id. Clicking the label
then focuses the field, which also enlarges the target for anyone
with limited precision.
<label for="email">Email</label>
<input type="email" id="email" aria-describedby="email-hint" />
<span id="email-hint">We only use it for receipts.</span>A short checklist
- Every field has a visible label that stays on screen.
- Hints are separate text, connected with
aria-describedby. - Required fields say so in words, not only with a color.
- Error messages name the field and say how to fix it.