Error Identification and Suggestion
Errors must be identified in text, described specifically, and accompanied by a suggested fix where one is known.
Definition
WCAG 3.3.1 requires that input errors are identified and described in text. 3.3.3 requires a suggestion for correction where it is known and does not compromise security. 3.3.4 adds reversibility requirements for legal and financial transactions.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Any form.
- Accessibility review of validation.
Common mistakes
- Errors indicated only visually.
- Messages not associated with their fields.
- Generic messages with no suggested fix.
Implementation
- Set aria-invalid on the failing field.
- Associate the message with the field using aria-describedby.
- Include the field name in the message, so it makes sense when read from an error summary.
- Move focus to an error summary on submit, with links to each field.
- Suggest the correction where you know it: an expected format, a valid range, a likely typo.
- For legal or financial submissions, provide reversal, confirmation or the chance to review.
A field and a summary that both announce
<!-- Focused on submit, so the error is the first thing announced -->
<div role="alert" tabindex="-1" id="error-summary">
<h2>There is a problem</h2>
<ul>
<li><a href="#expiry">Enter an expiry date in the future</a></li>
</ul>
</div>
<label for="expiry">Expiry date</label>
<span id="expiry-hint">For example, 03/2029</span>
<input
id="expiry"
aria-describedby="expiry-hint expiry-error"
aria-invalid="true"
/>
<p id="expiry-error">Enter an expiry date in the future</p>The field carries its own message through aria-describedby and aria-invalid. The summary is focused on submit, so the first thing heard is what went wrong and where.
Errors people can act on
Do
- Name the field in the message, so it still makes sense read from the summary.
- Say what to do, not only what is wrong: Enter a date in the future beats Invalid date.
- Suggest the correction when you know it, including a likely typo in an email domain.
- Keep the message present until the field is fixed, rather than announcing it once and removing it.
Do not
- Do not mark a field with colour alone. The criterion requires text.
- Do not put the error in a toast that disappears before the reader reaches the field.
- Do not use role="alert" on every field message, which produces several interruptions at once.
- Do not clear the reader's input on a validation failure, which turns a small correction into a reentry.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Error Messages
UX writingThe words that explain what failed and what to do about it.
Key difference
Error identification is the mechanism: the failure is stated in text, tied to the field and announced. Error messages are the sentence itself. A perfectly wired error that says Invalid input still leaves the reader stuck.
Use Error Identification and Suggestion when
- The error is conveyed by a red border alone.
- Nothing is announced, or focus never reaches the problem.
- You are checking against WCAG 3.3.1 and 3.3.3.
Use Error Messages when
- The error is detected and announced but says nothing useful.
- The wording blames the reader or names an internal code.
- The fix is what happened, why, and the next step, in that order.
Local chart
A11Y·016 · Region V · Grid B3
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Depends on
Get these right first, or this one will not hold.
- Labels and InstructionsA11Y·017 · Accessibility
An error that names a field nobody labelled cannot be acted on.
Check your work
Review passes that test whether this was done properly.
- Form UX ChecklistCHK·001 · Checklist
Related concept
Connected closely enough to change how you apply this.
- Status Messages and Live RegionsA11Y·009 · Accessibility
- Help Users Recognise, Diagnose and Recover From ErrorsHEUR·009 · Heuristic