Announce form errors with role=alert
role=alert makes a container announce whatever gets put into it, without moving focus. It is how a validation message reaches somebody who is still standing on the field they got wrong. W3C lists ARIA19 as sufficient for 3.3.1 Error Identification, and as one of the named routes under the sufficient path for status messages. There is one implementation rule and almost every failure is a breach of it. The empty container has to be present in the DOM at page load. Assistive technology watches an existing live region for changes, so a container injected together with its message is not a change to anything and announces nothing at all. Build the empty div into the template, then write text into it. The same trap catches a container hidden with display none, because a region that was never rendered was never being watched.
How we find it in an audit
Presence of the role is automated. Whether the announcement happens is not, so we submit forms with errors while listening, then check the DOM to see whether the container existed before the message did. That single check explains most of the silent failures we find.
How affected users experience it
Somebody submits, the page does not move, and nothing is said. The error is on screen in red, above the field, and there is no sign anything happened. They submit again. With a live region already in place, the message arrives the moment it is written, they are still on the field, and the fix takes seconds instead of a support call.
Passes vs. fails
Passes
<div id="form-errors" role="alert"></div>
<script>
document.getElementById("form-errors").textContent =
"Enter a valid email address.";
</script>Fails
form.insertAdjacentHTML("beforeend",
"<p class='error' role='alert'>Enter a valid email address.</p>");How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Error message describes invalid form field valueA tool finds candidates, you decide
Other ways to satisfy this rule
13 guides on this site are filed under 3.3.1 Error Identification. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- ARIA18sufficientRaise blocking errors in an alert dialog
- ARIA21sufficientFlag invalid fields with aria-invalid
- G83sufficientTell users which required fields they missed
- G84sufficientExplain when input is not an allowed value
- G85sufficientExplain format errors and show the fix
- PDF5sufficientMark required fields in PDF forms
This guide is our interpretation of W3C technique ARIA19: Using ARIA role=alert or Live Regions to Identify Errors. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.