To create an accessible website, you need to provide your users with clear instructions whenever they’re required to take action. If your website has a form, for example, people need to understand why the form exists, along with how to fill it out and what will happen when they submit it.
The Web Content Accessibility Guidelines (WCAG) contains a few rules for these types of elements. WCAG 2.1 Success Criterion 3.3.3, “Error Suggestion,” is particularly important for maintaining a good user experience.
The full text reads:
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 just reinforces a standard practice in web design: If a user error occurs, tell the user what they’re doing wrong. For example, if they leave out an essential form field, the site should add an asterisk or other indicator (more on this in a moment). The site should then tell the user that the field needs to be completed in order for the form to be processed.
If your website fails to meet this WCAG requirement, you’ve got a problem that needs to be fixed. Here’s how to test your content.
Finding "Input Errors" That Qualify for WCAG 3.3.3
In WCAG terminology, an input error is any information provided by the user that is not accepted by the system. This isn’t necessarily restricted to text provided by the user, but that’s usually the case — usually, WCAG 3.3.3 errors involve form validation.
Note: A separate WCAG criterion, 3.3.1 (“Error Identification”) requires that the error be detected and described to the user in text. WCAG 3.3.3 requires providing the solution for that error.
WCAG 3.3.3 is a Level AA criterion, which means that most websites need to follow it in order to comply with laws like the Americans with Disabilities Act (ADA). To determine whether your site conforms, follow these steps:
- Identify all components that require user input. Look for forms, checkout processes, and other interactive elements.
- For each component, identify the fields that could result in an input error. That includes any required fields, as well as fields that expect a specific type of input (for example, date fields that require the date in a certain format).
- For each of those components and fields, ask yourself: If an input error occurs, what happens next?
Your website should suggest ways to fix each error — and those suggestions should be clear, straightforward, and unambiguous.
Make Sure Error Notifications Aren't Visual Only
Remember, your users aren’t a monolith. Some may use screen readers (software that outputs text as audio or braille), and some may be unable to perceive certain colors. Your error notifications shouldn’t rely on visual elements alone to convey info.
For example, let’s say that your form has several required fields. If the user fails to fill out one of those fields, your site might send an error message that reads:
“Submission error. Please fill out all of the required fields, highlighted in red.”
The issue here is that some people have issues perceiving red (and folks who use screen readers may be unable to perceive any color). The error message would technically meet the requirements of WCAG 2.1 SC 3.3.3, but it would fail to meet the requirements of WCAG 2.2 SC 1.4.1, “Use of Color.”
This is an extremely common WCAG conformance error, and it's easy to fix. You simply need to convey the same information in another way; for example, highlight required fields in red while also using an asterisk to mark those fields.
To learn more, read: Use of Color for Accessibility Explained
Get Help with Web Accessibility
About 1 in 4 U.S. adults have a disability — that’s a sizable portion of your audience, regardless of your business’s size or industry. Web accessibility helps you provide a better experience for every user, including those who use assistive technologies.
The Bureau of Internet Accessibility can help you build a long-term, self-sustainable approach to accessible design. To learn more, send us a message to connect with an expert or get started with a free website accessibility analysis.
