3.3.1 Error Identification

What does it mean?

If your form checks input automatically, for example a missing required field or an invalid e-mail address, it must tell users which field is wrong and what the problem is, in words. A red border or an icon alone is not enough.

The message should be connected to the field in code, so screen readers read it when the field gets focus. This criterion applies whenever errors are detected automatically, both in the browser and after sending to the server.

Who does it help?

• People who are colour-blind and cannot see a red outline
• Screen reader users, who need to know which field to fix
• People with cognitive disabilities who need clear, specific messages

Common failures

• Invalid fields are only marked with a red border
• A general message such as "The form contains errors" with no hint which field is meant
• The error text is shown visually but not linked to the field, so screen readers do not read it
• The form is simply reloaded and empty, with no message at all

How we test it

• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Input errors are identified and described in text (validation messages captured without submitting).

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<input id="email" type="email" style="border-color:red">

<label for="email">E-mail address</label>
<input id="email" name="email" type="email" autocomplete="email"
  aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Error: please enter an e-mail address, such as [email protected].</p>

aria-invalid marks the field as wrong and aria-describedby makes the error text part of its announcement.

Practical tips

• For long forms, also show a list of errors at the top with links to each field.
• Remove aria-invalid again once the field is corrected.

Guides and patterns on this

• Forms that everyone can completeForms are where people buy, book or give up. This guide shows how labels, required fields and error messages need to work for keyboard, screen reader and magnifier users.
• Your first screen reader test in 30 minutesA screen reader shows without mercy whether your page is built properly. This guide lets you test your key pages yourself, with free tools and no prior experience.
• EAA compliance check: how to get your website tested for accessibilityThe European Accessibility Act asks for accessible services, not for a particular test. This guide explains what each kind of check can tell you, how an audit works, what ours costs, and what you hold at the end.
• Error messages that help instead of confuseErrors as text, linked, with a fix and an error summary.

Official source

Understanding WCAG 2.2 at the W3C: 3.3.1 Error Identification