Skip to main content

Back to Guidelines

What is Error Identification?

Errors are identified in text so users understand what went wrong.

Errors are identified in text so users understand what went wrong.

Keyboard and screen reader users.
People who need predictable interactions.
Users who benefit from visible focus and clear labels.

Good vs Bad Examples

Use the tabs to compare the accessible pattern with the example to avoid.

Good Example 1 – Error Identified in Text

Create Account form showing validation errors in text next to the email and password fields.

html

<input aria-describedby="email-error" />
<p id="email-error" role="alert">Please enter a valid email address.</p>

Why this is correct (developer logic):

Each error is described in text.
Screen reader users can understand what went wrong.
The problem is clear without relying on color alone.

Good Example 2 – Error Summary With Text

Checkout form showing a text-based error summary with specific instructions above the fields.

html

<div role="alert" aria-live="polite">Please fix the following errors: Email address is not valid.</div>

Why this is correct (developer logic):

The summary explains exactly what needs fixing.
Each field still keeps its own text error message.
Users can quickly review and correct mistakes.

Implementation Checklist

Progress0 / 5 completed (0%)

Keep the interaction predictable and easy to understand.
Test with keyboard and screen reader navigation.
Make sure focus is visible and easy to track.
Avoid hidden, unexpected, or unnecessary repetition.
Confirm the example meets the intended accessibility requirement.

Knowledge Check

Answer Yes or No to test your understanding of error identification.

Score: 0 / 3 · Answered: 0 / 3

Does the good example demonstrate error identification correctly?

Is the bad example acceptable for error identification?

Should this pattern be checked with keyboard and screen reader testing?