- Success Criterion 3.3.2
- Conformance level A
Field Instructions Placed After the Field They’re Meant to Explain
3.3.2 — Labels or Instructions
Scenario
Setting
An online clothing store's product listing page
What’s wrong
Instructions placed after the fields they govern in reading order (effectively unavailable at time of need).
Example
<input type="text" placeholder="Full name">Why it matters
Everyone filling forms, especially people with cognitive disabilities and magnifier users.
How to test
Check where format/requirement instructions sit relative to their field: if they appear after the field in reading order, screen reader and top-to-bottom readers encounter them too late.
How to fix
A persistent visible label must be provided, required status must be marked visually AND programmatically (with any symbol explained), and format rules stated before input.
<label for="name">Full name</label><input type="text" id="name" placeholder="e.g. Jane Smith">A persistent visible label survives once the user starts typing; a placeholder alone disappears.
Outcome
On an online clothing store's product listing page, this barrier is gone for everyone filling forms — they get the same result as anyone else here.
Who is affected
Everyone filling forms, especially people with cognitive disabilities and magnifier users.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Multi-Part Field Like a Phone Number With No Text Label
- Icon-Only Search Field With No Accessible Label
- Placeholder Text Used as the Only Label, Vanishing on Input
- Required Input Format Never Stated Until After an Error
- No Indication of Which Fields on a Form Are Required
- Radio Button Group Missing Its Question or Prompt Text