Error Handling with WAI-ARIA

Figure 1 Contact Us form displaying the form fields in error state.

Form validation messages or error messages help users rectify their mistakes and submit the form successfully.

Error messages should be clear, descriptive and easily available for all users to identify their presence. When a screen reader user encounters an input element in an error state, this information needs to be announced alongside its label text.

Error handling CAN be managed using following approaches:


  • New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
  • Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.