In plain English
A form field with no label is a blank box: people have to guess what goes in it. The most common shortcut, using the placeholder as the label, breaks as soon as you type, because the placeholder vanishes and takes the reminder with it. And a screen reader may announce nothing at all.
This rule is simple: give every field a real, visible label, and add instructions where the input needs a particular format or is required.
Who this is for
- Screen-reader users, who hear the label to know what a field is for.
- People with memory or attention differences, who need the label to stay put while they type.
- Everyone, especially at checkout, where a mislabeled field causes errors.
What “good” looks like
A real label tied to the field, plus instructions when needed.
<!-- Good -->
<label for="zip">ZIP code</label>
<input id="zip" name="zip" autocomplete="postal-code">
<!-- Bad: placeholder used as the only label -->
<input name="zip" placeholder="ZIP code">Where stores get it wrong
Checkout and newsletter fields labeled only by placeholder text, search boxes with no label at all, and required fields marked with a red asterisk but no text. These are among the most common findings in a self-check and on the common failures list.