3.3.1 Error Identification

What this rule means

WCAG 3.3.1 requires that when a form validation error occurs, the system identifies which field has the error and describes the error in text. Color alone is not sufficient — there must be a text message explaining what went wrong.

The error message must be programmatically associated with the relevant field (via aria-describedby, aria-errormessage, or proximity) so screen readers can announce it.

Why it matters

Users who are blind cannot see red borders or error icons. Users with color blindness may not distinguish red error styling from normal styling. Clear text descriptions of errors enable all users to identify and correct mistakes.

Good error identification reduces form abandonment and improves task completion for everyone, including users with cognitive disabilities who may not understand cryptic error codes.

Related axe-core rules

There are no automated axe-core rules specifically for error identification. However, rules like label, select-name, and aria-valid-attr-value help ensure form controls are properly labeled for error association.

How to test

• Submit forms with invalid or missing data and verify error messages appear.
• Check that error messages are in text (not just color or icons).
• Verify errors are associated with their fields (aria-describedby, aria-errormessage, or adjacent text).
• Test with a screen reader to confirm errors are announced when the field receives focus.
• Ensure error messages are descriptive — "Email is required" not just "Error".

How to fix

Bad practice

<!-- Error indicated only by color -->
<label for="email">Email</label>
<input type="email" id="email" style="border-color: red" />

<!-- Generic unhelpful error -->
<p class="error">Error in form.</p>

Good practice

<!-- Clear, associated error message -->
<label for="email">Email</label>
<input type="email" id="email"
       aria-invalid="true"
       aria-describedby="email-error" />
<p id="email-error" class="error" role="alert">
  Please enter a valid email address (e.g., name@example.com).
</p>

<!-- Using aria-errormessage (modern approach) -->
<label for="phone">Phone</label>
<input type="tel" id="phone"
       aria-invalid="true"
       aria-errormessage="phone-error" />
<p id="phone-error" class="error">
  Phone number must be 10 digits.
</p>

Common mistakes

• Relying solely on color (red borders) to indicate errors.
• Displaying a single generic error message at the top without identifying specific fields.
• Not associating error messages with their fields programmatically.
• Using error messages that don't explain what went wrong or how to fix it.
• Displaying errors in a toast/notification that disappears before the user can read it.