- Success Criterion 3.3.2
- Conformance level A
Required Field Marked in Code but Not Shown Visually
3.3.2 — Labels or Instructions
Scenario
Setting
A customer-support live-chat widget
What’s wrong
Required state exposed programmatically but with no visual indication, so sighted users can't tell mandatory from optional.
Example
<input type="text" placeholder="Full name">Why it matters
Everyone filling forms, especially people with cognitive disabilities and magnifier users.
How to test
Inspect a required field: if aria-required is set but there's no visual indicator (asterisk, 'required' text) for sighted users, it fails.
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 a customer-support live-chat widget, this barrier is gone for everyone filling forms — they no longer have to work around this.
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