wanghaisheng Form Labelling
Every form field needs a visible, persistent label that is programmatically associated with the input. This is the single most common accessibility failure on the web — and the easiest to fix.
Core Rules
Every Input Has a Visible Label
- Use element with for/id association
- The label must be visible at all times — not just as placeholder text that disappears on focus
- Labels go above the input (most accessible and most scannable)
- Never use placeholder text as the only label — it disappears when the user starts typing
Labels Describe What to Enter
- Good: "Email address"
- Bad: "Enter your info here"
- Good: "Date of birth (DD/MM/YYYY)"
- Bad: "Date"
- Include format hints in the label or help text, not just in placeholder
Required Fields Are Clear
- Mark required fields with visible text: "required" or *
- If using , explain it at the top of the form: " = required"
- Use aria-required="true" for programmatic indication
- Better: make most fields required by design and mark the optional ones instead — "Company name (optional)"
Grouping Patterns
Related Fields Need Fieldsets
- Group related fields with and
- Radio buttons: always group with fieldset
- Legend: "Preferred contact method"
- Options: Email, Phone, Text
- Checkboxes: group when they share a question
- Legend: "Which topics interest you?"
- Options: Design, Engineering, Product
- Address fields: group under "Delivery address" or "Billing address"
When You Have Multiple Forms
- Each form section should have a heading or legend
- Sections should be visually and structurally separated
- Progress indicators help users understand where they are
Instruction Patterns
Help Text
- Place help text between the label and the input
- Associate with aria-describedby so screen readers announce it
- Good: "Must be at least 8 characters with one number"
- Keep instructions concise — one sentence
Error Association
- Error messages must be programmatically linked to the field (aria-describedby or aria-errormessage)
- Place error text directly below the field, not in a remote banner
- Include the field label in the error: "Email address: please enter a valid email"
Common Mistakes
- Placeholder as label — disappears on input, invisible to many screen readers
- Icon-only labels — a magnifying glass without text "Search" label
- Labels far from inputs — spatial separation breaks the visual association
- Labels that change — don't change label text based on input state
- Unlabelled buttons — every button needs visible text or aria-label
Assessment Checklist
- Every input has a visible associated with for/id
- No placeholder-only labels
- Required fields are indicated visually and programmatically
- Related fields are grouped with fieldset/legend
- Help text is associated with aria-describedby
- Error messages are linked to their field
- All buttons have visible text labels