WCAG (Level A) SC 3.3.1 Error Identification (w3.org)
Issue description
WCAG 3.3.1, “Error Identification” focuses on helping users understand and correct errors when filling out forms or providing input on a website. This is crucial for everyone, but especially for people with cognitive disabilities or those who may be less familiar with the specific requirements of a form.
Many websites don’t provide clear and helpful error identification. This can lead to:
- Confusion: Users might not understand what they did wrong or how to fix it.
- Frustration: Repeated errors can lead to frustration and users abandoning the form altogether.
- Accessibility barriers: Users with cognitive disabilities may struggle to understand vague error messages or identify the fields that need correction.
WCAG requirements
This guideline requires that if an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. This means:
- Error indication: The form field with the error should be clearly visually indicated (e.g., by highlighting the field or using a visual cue like an error icon).
- Error description: A clear and specific error message should be provided in text, explaining what the error is and how to correct it.
- Association: The error message should be programmatically associated with the field in error, so assistive technologies can convey the information to users.
Benefits
- Improved user experience: Clear error identification helps users understand and correct mistakes easily.
- Reduced frustration: It prevents users from getting stuck or abandoning forms due to unclear error messages.
- Enhanced accessibility: It makes forms more accessible to users with cognitive disabilities.
Essentially, WCAG (Level A) SC 3.3.1 Error Identification ensures that users are provided with clear and helpful guidance when they make errors, making forms more user-friendly and accessible for everyone.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 2.5.3 Label in Name
- WCAG (Level A) SC 3.3.2 Labels or Instructions
- WCAG (Level AA) SC 3.3.3 Error Suggestion
- WCAG (Level A) SC 4.1.2 Name, Role, Value
- WCAG (Level AA) SC 4.1.3 Status Messages
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 3.3.1, “Error Identification” involves providing clear and helpful information to users when input errors are detected in forms or other input fields. Here’s how:
Identify the error
- Visual indication: Clearly indicate the field with the error. (Keep color contrast in mind! Read our documentation on color contrast: WCAG (Level AA) SC 1.4.3 Contrast (Minimum)) This can be done by:
- Highlighting the field (e.g., with a bold red border).
- Adding an error icon next to the field.
- Using color to highlight the field label or input text.
- Focus management: If possible, automatically move the keyboard focus to the field with the error.
Provide a descriptive error message
- Clear and specific: The error message should clearly explain what the error is and how to correct it. Avoid vague messages like “Invalid input” or “Please try again.”
- Example: Instead of “Invalid email address,”
use “Please enter a valid email address in the format [email address removed].”
- Example: Instead of “Invalid email address,”
- Concise language: Use clear and concise language that is easy to understand.
- Polite and helpful tone: Avoid using blaming or negative language.
Associate the error message
- Programmatic association: Use ARIA attributes (e.g.,
aria-describedby) to programmatically associate the error message with the field in error. This ensures that assistive technologies can convey the error message to users.
Example
HTML
<label for="email">Email:</label> <input type="email" id="email" name="email" aria-describedby="emailError"> <span id="emailError" class="error">Please enter a valid email address.</span>Consider user needs
- Cognitive disabilities: For users with cognitive disabilities, ensure that the error messages are clear, concise, and easy to understand. Avoid using jargon or technical terms.
- Visual impairments: Ensure that the visual indication of the error is clear and has sufficient color contrast.
Testing
- Screen reader testing: Test the form with a screen reader to ensure that the error messages are conveyed correctly to users.
- Keyboard navigation: Test the form using only the keyboard to ensure that users can easily navigate to and understand the error messages.
- User testing: Conduct user testing with people with disabilities to get feedback on the clarity and helpfulness of the error identification mechanisms.
By implementing these techniques, you can create forms that are more user-friendly and accessible to everyone, helping users understand and correct errors easily.
