If your website includes forms, contact forms, checkout forms, login pages, or booking forms, WCAG 3.3.1 applies to you.
In this WCAG Fix It guide, we’re looking at a critical usability requirement: clearly identifying when an error occurs and explaining what needs to be corrected.
Forms are where users complete important tasks, but if errors are not clearly identified, users may not understand what went wrong or how to fix it. When users can’t correct errors easily, they often abandon the process entirely.
What Is WCAG 3.3.1?
WCAG 3.3.1 – Error Identification requires that 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.
In simple terms, when a user makes a mistake in a form, the system must clearly explain what the problem is.
This helps users understand:
- Which field contains the error
- What went wrong
- What they need to fix
Without clear error messages, forms become confusing and frustrating.
What Counts as an Input Error?
Input errors occur when user data does not meet the required format or conditions.
Examples include:
- Missing required fields
- Invalid email addresses
- Password rules not met
- Incorrect date formats
- Invalid numbers or characters
If the system detects these issues, the user must be told exactly what happened.
The Human Impact of Unclear Error Messages
Imagine submitting a form and seeing only this message:
“Error submitting form.”
But where is the error, what do you need to? You don’t know:
- Which field caused the problem
- What needs fixing
- Whether your information was saved
Now imagine relying on a screen reader and the form simply refreshes without explanation.
The user has no feedback. They may try again or they may leave the website entirely.
Clear error identification ensures users can successfully complete tasks.
Common WCAG 3.3.1 Failures
Here’s what we typically see when scanning websites:
- Error messages that do not identify the field with the problem
- Form validation that relies only on colour
- Generic messages like “Invalid input”
- Error alerts not announced to screen readers
- Fields marked as invalid without explanation
- Form errors displayed far from the relevant field
All of these can fail WCAG 3.3.1.
How to Fix Error Identification Issues
Clearly Identify the Problem Field
Bad example:
“Invalid entry.”
Better example:
“Email address is required.”
The user should immediately know what went wrong.
Provide Helpful Error Messages
Error messages should explain how to correct the problem.
Bad example:
“Password invalid.”
Better example:
“Password must contain at least 8 characters and one number.”
This helps users correct errors quickly.
Place Error Messages Near the Field
Errors should appear close to the relevant input field.
Example:
<label for=”email”>Email Address</label>
<input type=”email” id=”email”>
<span class=”error”>Please enter a valid email address.</span>
This makes it clear which field needs attention.
Ensure Errors Are Announced to Assistive Technologies
Error messages should be programmatically associated with the input field.
Use attributes like:
aria-describedby
This ensures screen readers announce the error when the user returns to the field.
If You’re Using a CMS or Form Builder
Error identification issues often appear when:
- Forms rely only on visual styling
- Error messages appear at the top of the page with no field context
- Plugins generate generic validation messages
To fix:
- Enable descriptive validation messages
- Ensure fields are clearly identified
- Review form behaviour with assistive technology
- Test error handling after publishing
How to Test WCAG 3.3.1
After implementing fixes:
- Submit the form with missing or incorrect data
- Confirm the error is clearly explained
- Check that the problem field is identified
- Test using keyboard navigation and screen readers
Ask:
- Is the error message clear?
- Does it explain what went wrong?
- Does it tell users how to fix the issue?
If yes, the issue is resolved.
Why WCAG 3.3.1 Matters Beyond Compliance
Clear error identification:
- Improves form completion rates
- Reduces user frustration
- Supports screen reader users
- Helps users with cognitive impairments
- Improves usability for everyone
- Reduces legal risk
Forms are often the final step in a user journey. If users can’t understand errors, they can’t complete tasks. Clear feedback keeps users moving forward.
WCAG 3.3.1 Quick Fix Checklist
Error messages clearly identify the problem
The field containing the error is highlighted
Error messages explain how to fix the issue
Errors are not conveyed using colour alone
Error messages are programmatically associated with inputs
Errors appear near the relevant field
Forms re-tested after updates
WCAG 3.3.1 Error Identification Frequently Asked Questions
What is WCAG 3.3.1 Error Identification?
WCAG 3.3.1 requires that when a form input error is detected, the system must identify the error and describe it to the user in text.
Why are clear error messages important?
Clear error messages help users understand what went wrong and how to correct it, improving accessibility and usability.
Can error messages rely on colour alone?
No. Errors must not rely solely on colour to communicate problems. Text explanations must also be provided.
Do error messages need to work with screen readers?
Yes. Error messages should be programmatically associated with the relevant input field so assistive technologies can announce them.