Accessibility rule: Field input error is not announced in full, explained

Summary

Error messages in forms must be clearly and fully announced so users can understand and fix issues immediately. Using aria-live="assertive" together with aria-atomic="true" ensures screen readers read the complete error message with proper context.

Overview

Most of us have experienced trying to complete a poorly designed online form. Some information is wrong, and you can not complete the form, but it is hard to understand where the error is. This is a frustrating experience for anyone and a real barrier for users with cognitive or visual impairments.

When filling out a form, all users need to understand what information to add to each input field. If for instance, a user types a date in the wrong format, they should be made aware of the error. This ensures that the user will know immediately that the information provided has the wrong format.

Who is impacted by this barrier?

The rule checks that field input error messages are announced in full by screen readers.  

When the page content changes, sighted users can often see it immediately even if they are looking at another part of the page. On the other hand, screen readers need to be told to stop reading what they are currently reading if an error occurs. This is done using aria-live="assertive" which enables the screen reader to read the new or updated content. However, the error might still lack some context. By adding aria-atomic="true", a screen reader will know to read the entire error message.

“Atomic” comes from Greek and literally means “cannot be cut”.

How does this work?

The rule checks that an input field marked as aria-live="assertive"  is also marked as aria-atomic="true". 

Related content

Read more about how the check works in the technical documentation.