Standards · WCAG 2.2

SC 3.3.1 Level A WCAG 2.0

Error Identification

When the user makes a form error that is automatically detected, the error must be identified and described to the user in text — not by colour alone, not by an icon alone, not by silence.

What it asks

If a form input is invalid (wrong format, missing required value, out-of-range) and the system automatically detects it, the error must be identified to the user with a text description. The text must say which field is wrong and what is wrong — not just that “something” failed.

The SC does not require the system to detect every possible error; it requires that detected errors are surfaced to the user as text.

How to meet it

  • Pair every form field with a visible error message describing the problem, placed next to or below the field.
  • Reference the failing field by name: “Email address must include an @ symbol.”
  • Link the error to the input with aria-describedby so screen readers announce it on focus.
  • Use aria-invalid="true" on the failing input.
  • For server-side validation, render a summary list at the top of the form, with each item linking to the failing field.
  • Announce dynamic validation messages via a live region (aria-live="polite" or role="alert") so screen readers hear the error without the user having to find it.

Common failures

  • Red borders around invalid fields with no text explanation.
  • A generic banner that says “Form invalid” without identifying which fields.
  • Tooltip-only error messages that vanish on blur.
  • Native browser validation (required, pattern) used alone — the browser’s bubble is unreliable for screen readers and disappears too quickly.
  • Inline icon-only error indicators (red exclamation mark) with no accessible name.

Why it matters

This is the most commonly cited input-assistance failure in audits. For sighted users a red border is at least a hint; for screen-reader users, it might as well not exist. For colour-blind users, a red border alone fails to register at all. Once a user has filled out a long form and submission fails silently, they’re likely to abandon — and accessibility is the reason it failed for them specifically.

Pair 3.3.1 with 3.3.3 (Error Suggestion) and 4.1.3 (Status Messages) — together they form the modern form-error pattern.