WCAG 3.3.1: Error Identification
If an input error is automatically detected, the item that is in error must be identified and the error described to the user in text. Error messages must not rely solely on color, icons, or position.
What is WCAG 3.3.1 Error Identification?
WCAG 3.3.1 Error Identification is a Level A web accessibility success criterion under the Understandable principle. If an input error is automatically detected, the item that is in error must be identified and the error described to the user in text. Error messages must not rely solely on color, icons, or position. Common failures include indicating errors only with a red border (no text message) and generic error messages like 'there was an error' without specifics. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Submit forms with empty required fields and check for descriptive error messages
- ✓ Enter invalid data and verify the specific error is described in text
- ✓ Check that error messages are associated with the relevant form field
- ✓ Verify errors are announced by screen readers (using aria-describedby or live regions)
- ✓ Test that the error message identifies which field has the error
Common Failures
- ✗ Indicating errors only with a red border (no text message)
- ✗ Generic error messages like 'There was an error' without specifics
- ✗ Error messages that are not programmatically associated with the input
- ✗ Errors that are only shown at the top of the form without linking to fields
- ✗ Validation errors that disappear before the user can read them
✓ Good Example
<label for="email">Email address</label> <input id="email" type="email" aria-describedby="email-error" aria-invalid="true"> <p id="email-error" role="alert" style="color: #dc2626;"> Please enter a valid email address (e.g., name@example.com). </p>
The error message is in text, describes what is wrong, provides a hint for correction, is programmatically linked to the input via aria-describedby, and uses aria-invalid to mark the field.
✗ Bad Example
<label for="email">Email address</label> <input id="email" type="email" style="border-color: red;"> <!-- No error message text -->
The only indication of an error is the red border color. No text message describes what is wrong, and there is no programmatic association for screen readers.
Test Your Site for 3.3.1 Compliance
Use our free accessibility tools to check your website against WCAG 3.3.1.
Open Testing Tool