WCAG 2.1 – Criterion 3.3.1 – Error Identification (Level A)

We all make mistakes, but WCAG has our backs and lets us know when they happen!
It’s a pity that we don’t have such beautiful error detectors in real life… 😞

Today we’re discussing WCAG 3.3.1 Error Identification.

WCAG 3.3.1 Error Identification

The Principle:
When users interact with a website or application, they should be informed when they make a mistake and be told what the error is. Ideally, users should be helped to avoid making the mistake in the first place. This rule applies to everyone, including those using assistive technologies.

What should we do to make this work?

• Indicate required fields: make sure that users know which fields are required to complete the form (use required or aria-required attributes).
• Provide appropriate error messages: implement clear and specific error messages for form fields and make sure they are communicated effectively (we’ll cover more on this in WCAG 3.3.2 next week).
• Link error messages to form fields: properly associate error messages with form fields so that screen readers can process them.
• Offer additional guidance: provide extra hints to help users complete the form, such as “Password should contain X, Y, Z (…)”.
• Add a general error message: include a general message indicating that there are errors in the form, like “Warning, there are 3 errors in your form. Please fix them to proceed” (this message can also be visually hidden).

What should we avoid?

1. Don’t indicate errors only by color, such as a red border, as this does not support colorblind users.
2. Don’t use general error messages, like “This field is required” (we’ll discuss this in detail in WCAG 3.3.3 in two weeks).