Why this matters
When form validation fails, users need to know which field has an error and what went wrong. Relying on color alone (a red border) is invisible to screen reader users and people with color blindness.
Common failures
These are the most frequent ways this criterion is violated in real-world websites:
- Error messages not associated with the input field
- Errors indicated only by color change
- Generic messages like 'There was an error' without specifics
- Error messages that disappear before the user can read them
How to fix
- Use aria-describedby to associate error messages with inputs
- Set aria-invalid='true' on fields with errors
- Provide specific error text: 'Email address must include @' not just 'Invalid input'
- Use role='alert' or aria-live='polite' for dynamically displayed errors
Related axe-core rules
xsbl uses axe-core to automatically detect violations of this criterion. The following rules are checked:
Check your site for 3.3.1 violations
xsbl scans your rendered pages in a real browser and finds violations of this criterion automatically.
Scan your site freeOfficial reference: Understanding WCAG 3.3.1: Error Identification (W3C)