Success Criterion 3.3.1 (Level A)
If an input error occurs in your website/application, is the error identified and described to the user in text form?
Why is this important
Making sure an input error has been identified and clearly described to the user in text ensures he/she knows an error has occurred and how to correct it in order to progress forward. For example, a screen reader user may not know there is an error on the page until he/she encounters the text error message and assume the page is not functioning correctly resulting in frustration and leaving the form/page all together.
Denoting an error with images and colors is acceptable if the error is accompanied by text.
Whom does it benefit?
As a student who is blind and uses a screen reader,
filling out a registration form can be tricky.
I want error messages, at a minimum, displayed in text
so that I can have my screen reader read the details of the error to me out loud.
As a student with a learning disability
I want the error to be described in a simple, detailed message
so that I can understand what I did incorrectly.
What should you do?
Provide text error alerts for:
- Information that is required but omitted by the user
- Information that is provided by the user in the wrong data format or allowed values.
How do you do it?
There are many techniques to successfully accomplish accessible error identification and form validation. Some common approaches are:
- Provide error messages at the top of the form or error messages adjacent to each form field in error
- Alert pop-up windows
- Provide dynamic error messages as the user enters data.
Need technical guidance?
Technical guidance is available for implementing this Success Criterion at the Understanding Success Criterion 3.3.1 - Error Identification page.
Additional Resources to help you:
- Form data validation - MDN web docs moz://a
- How to Provide Accessible Error Identification - LEVEL Access
- Usable and Accessible Form Validation and Error Recovery - WebAIM