Flag invalid fields with aria-invalid
aria-invalid=true marks the specific field that failed validation, so somebody moving back through a form hears which one to fix. W3C lists it as sufficient for 3.3.1 Error Identification. Two rules come with it, and W3C's test procedure states both. The attribute must not be true when there is no validation failure. That catches the framework that renders it on every field at page load and turns a clean form into a wall of errors. And the field's associated text has to carry enough information to understand the error. So the flag alone is not the technique. Pair it with aria-describedby pointing at a message that says what went wrong, and clear both the moment the value becomes valid.
How we find it in an audit
The attribute is an automated find, including the case where it sits on every field before anybody typed anything. The rest is submitting a form wrongly and then correcting it, because the half that goes untested is whether the flag comes off again when the value is fixed.
How affected users experience it
A form comes back with a red border on one field out of 14. Read by ear, red does not exist, so the only route is to move through all 14 and try to work out which one the page is unhappy about. With aria-invalid and a described error, the field announces Email, invalid entry, enter an email address with an at sign, and the correction takes one stop instead of 14.
Passes vs. fails
Passes
<input id="email" type="email" aria-invalid="true" aria-describedby="email-err">
<p id="email-err">Enter an email address with an @ sign.</p>Fails
<input id="email" type="email" class="field--error">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
- ARIA19sufficientAnnounce form errors with role=alert
- 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 ARIA21: Using aria-invalid to Indicate An Error Field. 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.