If a form displays any input errors, those errors are clearly identified, and focus is directed back to the invalid field.
To test error messages, find a form and then put it into an error state. For example, try submitting a form without filling out all of the required fields. The important principles for error messages include:
- More than Color Alone: Some forms will indicate which fields are in error by simply putting a red border around it or some other use of color alone, which will not be perceivable to people who can't see color.
- Explicit Messages: The error message needs to specifically say that it is an error, such as "Error: First Name is Required". Otherwise, just using a phrase such as "First name is required" may not tell a user that this field is in error. The user should be given as much information about correcting the error as possible (with an exception for things like login screens where explicit messages could compromise security).
- Inline Errors: Each form field that is in error should have a clear indication and not just a vague message about "there are errors on the form".
Scoring Guide
- Pass: All form fields clearly indicate that they are in error with something other than color, and instructions are provided to help the user to correct the error if necessary.
- Partial Fail: Some form fields do not have clearly defined error messages or instructions on how to correct the error.
- Fail: Form fields use only color to indicate errors or do not indicate which fields are in error.
- Not Applicable: No form fields are on the site, or it was not possible to put the form into an error state (for example, forms are disabled until all form fields are filled in).
- Unknown: No form fields were found during testing, but it is possible there might be some outside the scope of the testing.
More Information
Error messages are one of the trickier items to program correctly. The following include some different methods and techniques for achieving accessible error messages:
- WebAim: Usable and Accessible Form Validation and Error Recovery
- Level Access: How to Provide Accessible Form Error Identification
- W3C WAI: User Notifications
