- Success Criterion 3.3.1
- Conformance level A
Error Shown Only Through a Placeholder or Color Change
3.3.1 — Error Identification
Scenario
Setting
A fashion e-commerce site's checkout page
What’s wrong
Errors described only via placeholder change or color change of label.
Example
A QA pass on a fashion e-commerce site's checkout page turns this up: errors described only via placeholder change or color change of label.
Why it matters
Everyone submitting forms — especially screen-reader and color-blind users who miss color-only cues. On a fashion e-commerce site's checkout page, that means they lose their progress and have to start over.
How to test
Submit invalid data with a screen reader: if the error is conveyed only by a placeholder change or the label's color, with no separate error text, it fails.
How to fix
A text error message must identify each field in error and be exposed to assistive technology (announced automatically or focused).
Outcome
With the fix in place on a fashion e-commerce site's checkout page, they complete the form without guessing.
Who is affected
Everyone submitting forms — especially screen-reader and color-blind users who miss color-only cues.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Form Submission With No Way to Identify What Went Wrong
- Form That Fails Silently With No Error Message at All
- Form Errors Marked Only by a Red Border, With No Text
- Generic ‘There Were Errors’ Message With No Field Named
- Error Text That’s Visible but Never Announced to Screen Readers
- Error Summary That Names Fields Too Vaguely to Identify Them