- 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
Consider a customer-support live-chat widget: required state exposed programmatically but with no visual indication, so sighted users can't tell mandatory from optional.
Why it matters
Everyone filling forms, especially people with cognitive disabilities and magnifier users. On a customer-support live-chat widget specifically, they can't tell what a field wants or why it failed.
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.
Outcome
Fixed, a visitor to a customer-support live-chat widget can finish the task in one attempt.
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