Skip to main content

WCAG 3.3.1 Error Identification

This page demonstrates how to properly identify and communicate form errors to users, including those using assistive technologies.

Poor Implementation Example

Registration Form - Poor Error Handling

Invalid email!
Too short!
Why this fails:
  • Error messages are always visible
  • No programmatic association between errors and fields
  • No error summary
  • Unclear error messages
  • No ARIA attributes for screen readers

Good Implementation Example

Registration Form - Proper Error Handling

Please enter your first name (minimum 2 characters)
Please enter a valid email address (e.g., user@example.com)
Password must be at least 8 characters long and contain both letters and numbers
Passwords do not match
Please enter a valid phone number
You must agree to the Terms and Conditions
Why this works:
  • Clear, specific error messages
  • Errors are associated with form controls using aria-describedby
  • Error summary for screen readers
  • Real-time validation feedback
  • Visual and programmatic indication of errors
  • Clear instructions for correction

Real-time Validation Example

Username Availability Check

Enter a username (minimum 3 characters)

Best Practices Summary

  • Provide clear, specific error messages
  • Associate error messages with form controls
  • Use appropriate ARIA attributes
  • Provide error summary for multiple errors
  • Include suggestions for correction
  • Use both visual and programmatic error indicators
Interact with the forms to see error handling in action