error-association-incorrect

Description

Error messages must be correctly associated with the corresponding form fields to ensure that users, especially those with cognitive disabilities, can easily identify and resolve errors. This rule ensures that error messages are visually linked to the fields they describe, enabling sighted users to easily associate an error with the associated field.

The error-association-incorrect rule aligns with WCAG Success Criterion 3.3.3 (Error Suggestion), which requires that error messages be clearly identified and described to the user in text.

Examples

In the following example, an error message is displayed when a required field is left empty, but the error message is not visually associated with the field. This violates the error-association-incorrect rule because users cannot easily associate the error and the associated field.

In the following corrected example, the error message is associated with the field using the aria-describedby attribute, ensuring that assistive technologies can correctly convey the error to the user.

How to fix?

To fix violations of the error-association-incorrect rule, follow these steps:

1. Identify all error messages on your webpage.
2. Ensure that the placement of the error is such that it is visually clear that the error is associated with the field. If possible, ensure that each error message is programmatically associated with the corresponding form field using the aria-describedby attribute.
3. Test the association using assistive technologies to ensure that error messages are correctly conveyed to users.

Reference

WCAG Success Criterion 3.3.3: Error Suggestion