Error notification is not announced by screen reader

What is the problem?

When error validations are triggered it’s important to insure all users are made aware of the error. Visual text added to the screen will be noticed by some users, but programmatically exposing the error is also needed. Without this some visitors might not be aware of the error and able to correct it.

When an error is detected a non-text visual update is made

A common example of this is just turning the form controls with errors, red.

All errors should have a visible text-based indication

Best practice is to include the name of the controls with errors, but the base requirement is to have an error that explains the submission was not successful.

G83: Providing text descriptions to identify required fields that were not completed

G85: Providing a text description when user input falls outside the required format or values

Visible text base error message are added to the screen without a notification to assistive technologies

Screen readers and other assistive technologies need to be made aware when text is added to the Document Object Model.

Use an role="alert" on the element that contains the error message

This is equivalent to using aria-live="assertive".

The content within the alert will then be automatically announced by the screen reader, without the person using the screen reader having to put focus on the message.

ARIA19: Using ARIA role=alert or Live Regions to Identify Errors