WCAG (Level AA) SC 3.3.3 Error Suggestion (w3.org)
Issue description
WCAG 3.3.3, “Error Suggestion” builds upon the basic error identification requirements of 3.3.1 by encouraging websites to provide suggestions to help users correct input errors. This is particularly helpful for users with cognitive disabilities or those who may be unfamiliar with the specific requirements of a form.
While identifying errors is important, simply telling users they’ve made a mistake isn’t always enough. Some users might need more guidance on how to correct the error. This is especially true for:
- Complex input formats: Fields that require specific formats (e.g., dates, phone numbers, credit card numbers) can be prone to errors.
- Unfamiliar data: Users might not know the correct information to enter, such as a specific product code or account number.
- Cognitive differences: Users with cognitive disabilities might have difficulty understanding how to correct errors, even with a clear error message.
WCAG requirements
This guideline suggests that if an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content. This means:
- Suggesting corrections: Offer specific suggestions for how to correct the error, such as:
- Suggesting valid formats (e.g., “Please enter the date in MM/DD/YYYY format.”)
- Providing examples (e.g., “Phone number should be in the format (555) 555-5555.”)
- Offering auto-completion or dropdown options.
- Security considerations: Avoid providing suggestions that could reveal sensitive information or compromise security (e.g., suggesting possible passwords).
Benefits
- Reduced errors: Providing suggestions can help users avoid making the same mistake again.
- Faster completion: It can help users complete forms more quickly and efficiently.
- Improved user experience: It creates a more helpful and supportive experience for users.
Essentially, this guideline encourages websites to go beyond basic error identification and provide proactive suggestions to help users correct their mistakes, making forms more user-friendly and accessible.
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.1 Error Identification
- WCAG (Level A) SC 3.3.2 Labels or Instructions
- 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.3 “Error Suggestion” involves providing suggestions to help users correct input errors, making forms more user-friendly and accessible. Here’s how:
Offer suggestions for correction
- Specific suggestions: Provide specific suggestions on how to correct the error, tailored to the type of input field and the nature of the error.
- Example: If a user enters an invalid date format, suggest the correct format (e.g., “Please enter the date in MM/DD/YYYY format.”).
- Examples: Provide examples of valid input to guide the user.
- Example: If a user enters an invalid phone number, provide an example of the correct format (e.g., “(555) 555-5555”).
- Auto-completion: Use auto-completion to suggest possible correct values as the user types. This is particularly helpful for fields like names, addresses, or product codes.
- Dropdown lists or selection controls: Provide dropdown lists or other selection controls for fields with a limited set of valid options.
Consider security and privacy
- Avoid sensitive data: Do not provide suggestions that could reveal sensitive information or compromise security (e.g., suggesting possible passwords or usernames).
- User control: Allow users to disable suggestions if they prefer, especially for fields that contain personal or private information.
Combine with error identification
- Clear error messages: Use clear and specific error messages in addition to suggestions.
- Visual cues: Use visual cues, such as highlighting the field or displaying an error icon, to indicate the error.
- Programmatic association: Associate the error message and suggestions with the field in error using ARIA attributes (e.g.,
aria-describedby).
Testing
- Test different scenarios: Test the form with various input errors to ensure that appropriate suggestions are provided.
- Assistive technology testing: Test with screen readers to ensure that the suggestions are conveyed correctly to users.
- User testing: Conduct user testing with people with cognitive disabilities to get feedback on the helpfulness and clarity of the suggestions.
Examples
- Required fields: If a required field is left blank, provide a suggestion like “This field is required. Please enter your [field name].”
- Invalid email format: If a user enters an invalid email address, suggest the correct format and provide an example.
- Incorrect date format: If a user enters a date in the wrong format, suggest the correct format and provide a calendar picker to help them select the date.
By implementing these techniques, you can create forms that are more supportive and user-friendly, helping users avoid and correct errors more easily. This improves the overall user experience and makes your website more accessible to everyone.
