WCAG Principle: Understandable
Guideline 3.3: Input Assistance (Help users avoid and correct mistakes)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 3.3.1?
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.
When people are required to provide data on a website through forms, it is likely that they would make mistakes. It may be that the user did not provide the required information, or the information provided falls outside the required data format or allowed values.
The success criteria stipulates that errors must be presented in text form. However, other methods of error notification such as images, symbols and color can be used in addition to text errors.
How does it make your website accessible?
Providing programmatically determinable error messages makes your website accessible to all users, especially screen reader users and people with color blindness. This is because it helps them know when an error has occurred, what caused it and how to correct it.
Who benefits?
- Users who are blind or colorblind.
- Users with cognitive, language, and learning disabilities.
How to Meet Success Criterion 2.5.3
How to fix mistakes:
- Provide text descriptions to identify required fields that were not completed
- Use client-side validation and provide an alert dialog box identifying the mandatory fields which were omitted.
- Using server-side validation, re-display the form (including any previously entered data), with either a text description at the location of the omitted mandatory field, or a text description that identifies the omitted mandatory fields.
Helpful tips for developers:
- Include a message or alert, as some users may not be aware that an error has occurred and could assume that the form is not functioning correctly
- Include an error notification in the page title (title element) since a screen reader website user is likely to believe the page was submitted correctly and continue to navigate to another page as soon as the new page is returned instead of reading the main content area of the page again.
How to test if you've met compliance:
- Fill out a form, deliberately leaving one or more required (mandatory) fields blank, and submit it.
- Check that a text description is provided identifying the mandatory field(s) that was not completed.
- Check that other data previously entered by the user is re-displayed unless the data is in a security-related field where it would be inappropriate to retain the data for re-display (e.g. password).
If your website passes both checks, then it meets compliance with this success criterion.
Bad and Good Examples
BAd Code Snippet
<form>
<label for="email">Enter email address:</label>
<input id="email" type="email" required />
<span>You entered an invalid email address</span>
</form>In the code snippet above, the input field’s required attribute does not indicate to users that the field is required. Also, the error message <span>You entered an invalid email address</span> is not associated with the input field. This makes it unclear which form element the error message is describing.
To make this code more accessible, use the aria-required attribute on the input field and set its value to “true” or add a text that says “required” after the label. Also, use the aria-describedby attribute on the input field to associate the error message with the input field. See the optimized version below:
good Code Snippet
<form>
<label for="email">Enter email address:</label>
<input id="email" type="email" aria-describedby="email-error" aria-required="true" aria-label="email" required />
<span id="email-error" class="error-message">You entered an invalid email address</span>
</form>This improved version of the code provides clear associations between the error message and the input field, makes it clear that the field is required and provides a descriptive label for the input field.
This will help users who rely on screen readers to navigate the form, and it will make it easier for users with disabilities to understand what is required of them and to identify any errors they may have made.
Frequently Asked Questions
What types of errors does Success Criterion 3.3.1 cover?
Success Criterion 3.3.1 covers errors that occur when users interact with web content. These include completing a form, selecting from a list, or navigating to another page.
What is input error?
Input error refers to mistakes users make when entering information into a website or application. These include typographical errors, incorrect format, or missing required fields.
What is the purpose of testing for error identification?
The purpose of testing for error identification testing is to ensure the website or application provides specific and clear error messages that help users understand input errors and correct them. This helps prevent frustration and confusion and makes the website or app usable for everyone, including users with disabilities.
How can I ensure that my web content meets success criterion 3.3.1?
To ensure your web content meets success criterion 3.3.1, provide clear, specific, and easy-to-understand error messages that help users identify and correct mistakes. You can do this by using simple language, providing specific error codes or messages, and offering suggestions for fixing the problem. It is also important to place error messages near the fields or controls where the error occurred, and it should be easy for users to locate and read them.
Are there any tools or techniques that can help me test whether my website or web app meets WCAG 2.1 requirements for error identification?
Yes! You can use Equally AI’s ADA compliance checker to test whether your website or web application meets WCAG 2.1 requirements for error identification. We also provide expert manual testing and remediation services to ensure your entire website meets Level AA compliance.
