Error identification

When a form rejects input, saying in plain text which field broke and why. A red outline tells a screen reader absolutely nothing.

tell them what's brokenactual error messagewhich field is wrongred border isn't enoughsay what went wrong in the formform validation messagesinvalid input feedbackerror idenification

See it

Live demo coming soon

What it is

Error identification means that when a form rejects input, the page says in text which field failed and what was wrong with it. WCAG 3.3.1 requires the identification. Its sibling 3.3.3 (error suggestion) asks you to say how to fix it when a fix is known, unless handing that over would compromise security or defeat the point of the check, which is why a failed login says 'those details do not match' and not 'the password needed one more digit'. A red border alone fails both: a screen reader announces nothing, and a colorblind user sees a normal field.

A message that passes looks like 'Card expiry must be in the future, use MM/YY', not 'Invalid input'. Wire it up so assistive tech gets it too: put the message in an element referenced by aria-describedby on the input, set aria-invalid='true' while the error stands, and either move focus to the first bad field or render an error summary at the top of the form inside a live region that lists each problem as a link to its field.

The common mistakes are timing and blame. Validating on every keystroke screams at people mid-typing (validate on blur, revalidate on change once an error exists), and toast notifications are the wrong container because they vanish before the user reaches the field. Also drop the accusatory voice: name the constraint, not the user's failure.

Ask AI for it

Rework the validation in this form to meet WCAG 3.3.1 and 3.3.3. For each failing field render a text message that names the field and the specific constraint, plus how to satisfy it wherever the fix is known and safe to state (say nothing that would leak a credential or hand an attacker the answer to the check). Link it to the input with aria-describedby, and set aria-invalid while the error is present. Add an error summary at the top of the form in a role='alert' container listing every error as a link that focuses the relevant input. Validate on blur, not on every keystroke, and keep an icon plus text so the error does not depend on the red color.

You might have meant

form label associationaria live regionuse of colorfocus managementwcag