error-not-announced

Description

When a form field displays an error message, that message must be announced by screen readers so that users relying on assistive technologies are immediately informed of the problem. Without proper ARIA live region attributes, screen reader users may never hear the error message, leaving them unable to identify and correct the mistake.

The error-not-announced rule checks that error message elements are marked with role="alert" or aria-live="assertive" so that assistive technologies announce the error as soon as it appears. This rule aligns with WCAG Success Criterion 3.3.1 (Error Identification, Level A) and Success Criterion 4.1.3 (Status Messages, Level AA).

Examples

In the following example, an error message is shown when the user submits an invalid email address, but the error element has no role or aria-live attribute. Screen readers will not announce this error, which violates the error-not-announced rule.

In the following corrected example, the error message container uses role="alert" and aria-live="assertive". This causes screen readers to announce the error immediately when it is injected into the DOM:

How to fix?

To fix violations of the error-not-announced rule, follow these steps:

1. Locate all error message elements that are dynamically shown when a user enters invalid input, either before or after form submission.
2. Add role="alert" to each error message container. This implicitly sets aria-live="assertive", which causes screen readers to announce the message immediately.
3. If role="alert" is not suitable, add aria-live="assertive" explicitly on the container instead.
4. Ensure the error message container is present in the DOM before the error text is injected. Adding a live region dynamically may not be announced by all screen readers — the element must already exist in the page with the ARIA attribute in place.
5. Use aria-describedby on the form field to associate it with its error message element, so screen readers can additionally read the error when the field receives focus.

Reference

• WCAG Success Criterion 3.3.1: Error Identification (Level A)
• WCAG Success Criterion 4.1.3: Status Messages (Level AA)
• ARIA19: Using ARIA role=”alert” or Live Regions to Identify Errors
• error-identification-missing