Labels and Instructions
Every input needs a persistent label, and format requirements must be stated before the user types.
Definition
WCAG 3.3.2 requires labels or instructions when content requires user input. In practice this means a programmatically associated, visible label on every field, plus any format requirement stated up front.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Any form field.
- Accessibility review.
Common mistakes
- Placeholder-only labelling.
- Format rules revealed only after failure.
- Required marked by colour alone.
Requirements
- A visible label element associated with the input by its for attribute.
- Format requirements shown before entry, not revealed on failure.
- Required fields marked in text, not by colour or an unexplained asterisk.
- Hint text associated with the field through aria-describedby.
- Autocomplete attributes set correctly, which WCAG 1.3.5 requires for fields collecting user information.
- Groups of related fields wrapped in a fieldset with a legend.
Autocomplete tokens worth setting
WCAG 1.3.5 asks for the purpose of fields collecting information about the reader to be identifiable. In practice it also removes most of the typing, which is why it helps everyone.
| Field | Token | Effect |
|---|---|---|
| Full name | name, or given-name and family-name | Fills from the platform's stored identity rather than from memory. |
| Removes the most commonly mistyped field in any form. | ||
| Phone | tel | Also prompts the numeric keypad on mobile when paired with the right input type. |
| Address | street-address, address-level2, postal-code, country | Each part needs its own token, or nothing fills. |
| Card details | cc-number, cc-exp, cc-csc | Fills from the platform wallet, which is faster and safer than reading from a card. |
| A code sent by SMS | one-time-code | Offers the code from the message, which is what WCAG 3.3.8 is asking for in a different form. |
Labelling that holds up
Do
- Keep the label visible at all times, above the field, where it survives entry and zoom.
- State the format before entry, in text associated with the field.
- Mark required fields with the word required or an asterisk that is explained in text.
- Group related inputs in a fieldset with a legend, so the question is announced with the options.
Do not
- Do not use a placeholder as the label. It disappears exactly when the reader wants to check it.
- Do not put instructions only in a tooltip, which is unavailable on touch and easy to miss.
- Do not label a field with an icon alone.
- Do not ask for the same information twice in one process, which WCAG 3.3.7 now addresses directly.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Accessible Names
AccessibilityThe string computed for a control and announced by assistive technology.
Key difference
A label is what everyone sees beside the field. The accessible name is what assistive technology announces. They should match; when they do not, the visible label is usually right and the name has been overwritten by an aria attribute.
Use Labels and Instructions when
- The field has no visible label, or only a placeholder.
- A format requirement is discovered by getting it wrong.
- The audience is everyone, not only assistive technology users.
Use Accessible Names when
- The control is an icon button, a link or a region rather than a field.
- A screen reader announces something different from the visible text.
- You are debugging aria-label, aria-labelledby or a label association.
Local chart
A11Y·017 · Region V · Grid B4
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Relied on by
Entries that assume this is already in place.
- Error Identification and SuggestionA11Y·016 · Accessibility
An error that names a field nobody labelled cannot be acted on.
- CheckboxCMP·005 · Component
- Text InputCMP·003 · Component
- AuthenticationPAT·023 · Pattern
- Input ValidationPAT·007 · Pattern
- Form Labels and Help TextWRT·009 · UX writing
A visible label is both a writing decision and a WCAG requirement.
Check your work
Review passes that test whether this was done properly.
- Form UX ChecklistCHK·001 · Checklist