Tell users which required fields they missed
A submitted form comes back with three fields outlined in red and one line at the top saying please correct the errors. G83 asks for the missing fields to be named in text instead. W3C counts it as sufficient for the error-identification rule at Level A on its own, and for two further rules in combination. Alongside descriptive labels it covers the labels-and-instructions rule, and alongside a live-region technique it covers the status-messages rule at Level AA, which is the one that decides whether a screen reader hears the message at all. The other half of the technique is what happens to the data. The form comes back with everything the reader already typed still in it, except where the field held a password and keeping it would be wrong.
How we find it in an audit
A reviewer submits every form with required fields deliberately empty, then reads what comes back. Naming the fields in text is the check. A red border is not a name and an asterisk is not a message. Two follow-up questions come after that. Whether the data already entered survived the round trip, and whether a screen reader announced the failure without the user having to go looking for it. Client-side and server-side validation get tested separately, because plenty of forms do one well and the other not at all.
How affected users experience it
The line please correct the errors sends a screen-reader user back to the top of the form to walk it field by field, listening for a state they cannot see. On a form of twenty fields that is twenty stops to find three problems. Naming the fields turns it into a list they can act on, and making each name a link that jumps to its field turns it into three keystrokes. Readers with cognitive disabilities gain the same thing, since the alternative is holding a search in their head while they scroll.
Passes vs. fails
Passes
2 fields need completing, Email address and Postcode. Each name links to its field, whose label repeats what is required.
Fails
Submission fails, three field borders turn red, and the only text on the page says please correct the errors.
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
- ARIA21sufficientFlag invalid fields with aria-invalid
- 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 G83: Providing text descriptions to identify required fields that were not completed. 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.