Error Handling with WAI-ARIA

screenshot of form with error messages
Figure 1 Contact Us form displaying the form fields in an 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 messages SHOULD contain instructions on what valid input is acceptable wherever possible. For example, for the Date field, the correct format of date to be entered can be included in the error message. This aligns users as to what is wrong in their input.

For example, date field is expected to be in MM/DD/YYYY format.

Error handling CAN be managed using following approaches:

NOTE:

  • 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.