Labels or Instructions

Why it matters

A form built on placeholders erases its own instructions as you follow them. Type into the field and the label goes. By halfway down, every field you have answered is an anonymous box with no way to check what it asked for, which is exactly when somebody with a memory or attention difficulty needs to check. Stating the format up front instead of revealing it through an error message afterwards is the difference between guiding somebody and marking their work. The business reason sits right next to the human one. A user who knows the rules before they type does not submit, fail, and come back.

Who this rule protects

Users with cognitive disabilities lose the instruction the instant its placeholder disappears, and they are the people least able to rebuild it from memory. Screen reader users meet a field that was never labeled at all. People with low vision struggle with placeholder text in particular, since browsers usually render it at a contrast that would fail the contrast rule if it were ordinary text. And everybody guesses at date formats nobody stated.

How to check it yourself

1. 1Fill in each form yourself and watch what happens to the labels as you type. Anything that disappears was not a label.
2. 2Check optional fields as well as required ones. The rule reaches every field that accepts input, and the word requires in its text does not mean required fields.
3. 3Look for the format rules before you make a mistake rather than after. Password rules, date formats and phone formats all have to be visible before submission.
4. 4Check the options inside a control, not just the control. Every radio, every checkbox and every option in a combobox needs its own label.
5. 5Put general instructions before the form element in the source, since screen readers switch into a mode inside a form that reads the controls and skips the ordinary text between them.

Failures we see most often

• A placeholder-only form turns into a memory quiz once it is half filled in, because every field already answered has lost its label.
• Password rules arrive one at a time through error messages, so the user learns the requirements by failing them.
• Three boxes hold an area code, an exchange and a number, and nothing says the group is a phone number. That is W3C's own named failure for this rule, and it holds even when all three boxes carry proper accessible names.
• A date field takes a date and says nothing about which order it wants the parts in, so half the traffic gets it wrong and the other half was lucky.
• The instructions sit inside the form element between the fields, so a screen reader in forms mode reads straight past them.

Who this one is for

Read from this rule's own note above, so the grouping and the note cannot disagree.

• Blind and screen reader userspeople who cannot see the screen
• Low visionpeople who can see the screen but not easily
• Cognitive and learningpeople for whom the difficulty is understanding, remembering, or staying with it

How to fix it

• Give every field a real label element and keep it on screen. Use the placeholder for an actual example, such as Apple Pie in a search box that already has a Search label above it.
• State the format where the user will need it, which is before they type. A password needs at least 12 characters is one sentence and it saves a round trip.
• Group split fields in a fieldset with a legend naming the whole thing, and label the parts individually. Where the design has no room for visible sub-labels, invisible ones on the parts are acceptable as long as the group is visibly named.
• Say less rather than more once the essentials are covered. Too much instruction is as harmful as too little, and a form crowded with help text is a barrier of its own.

Passes vs. fails