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

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 rule work?

The rule checks that an input field marked as aria-live="assertive"  is also marked as aria-atomic="true". Read more about how the check works in the technical documentation.