15.4 Error messages are not announced by the screen reader (H)

'First name' error message highlighted on the timetables page

FIGURE 15.8: ‘First name’ error message highlighted on the timetables page

15.4.1 WCAG 3.3.1 (A) - Desktop

When the user skips over a form field, an error message ‘Please specify your first name’ appears on the Timetables form. This is not announced by screen reader.

If error messages are not announced, screen reader users will not be aware that these errors have occurred and this may result in the user abandoning the form thinking it isn’t functional.

This issue also persists on the Registration form page.

15.4.2 Recommendation

Implement an error message system that clearly presents error messages visually and are communicated by screen readers for all form fields. The error messages can appear at the top of the page so users are aware that errors have occurred. Also, consider implementing inline errors which should be indicated by setting aria-live=‘assertive’ so that dynamic elements on the page are announced when user input produces changes.

The position of the error messages should also appear above the field with the error. Upon form submit, the error should be announced by the screen reader and focus should move to the field with the error to make it easier for the user to identify which fields have the input error.

Also, provide helpful and informative instructions to avoid input errors, including allowed values and expected format. Error messages should clearly define:

  • What the problem was
  • Why it happened
  • How to solve the issue

For more information on error messages