WCAG 2.1 · Level A · Understandable
WCAG 3.3.1 — Error Identification, explained with examples
When an input error is detected, the field in error and the description of the error must be conveyed in text. Color-only error states (red border) exclude users who cannot perceive the color. Text + ARIA association ensures every user knows what failed and why.
- Number
- 3.3.1
- Level
- A
- Principle
- Understandable
- Guideline
- 3.3 Input Assistance
Why this criterion exists
Color-only error states (red border) exclude users who cannot perceive the color. Text + ARIA association ensures every user knows what failed and why.
If you only remember one thing: when an input error is detected, the field in error and the description of the error must be conveyed in text. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Error Identification affects:
Color-blind users
Screen reader users
Anyone in bright sunlight
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
Red border with no text message
Error message visible but not associated with the field
How to test for it
Submit a form with bad data; error must be in text and announced by AT.
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
aria-invalid + aria-describedby + role="alert" combine to flag the field and announce the message.
The problem
<input type="email" class="border-red-500">The fix
<input type="email" id="email" aria-invalid="true" aria-describedby="email-err">
<p id="email-err" role="alert">Please enter a valid email address.</p>aria-invalid + aria-describedby + role="alert" combine to flag the field and announce the message.
Other Understandable criteria
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.