Error Messages - Information For This Demo
Quick tip: The goal is to make sure it is obvious that an error has occurred, and it is easy to figure out which fields have errors.
How to test this issue
Since there are a number of possible solutions for providing usable error messages, so you must make a judgment call.
Here are a few possible solutions. More than one of these solutions should be provided.
- Provide a list of errors at the top of the page, beginning with a heading indicating errors were found.
- Display an error message using a JavaScript alert to let the user know an error has occurred.
- Update the labels for input fields to included error messages when appropriate.
- Update the page title to indicate an error condition has been found.
- ARIA can be used to provide error messages also.
Here are some techniques you can use to test form errors.
- Test technique: WAVE.
- If a list of errors is provided at the top of the page, use WAVE to confirm the list begins with a heading.
- Use WAVE to confirm appropriate error labels are provided for input fields.
- Alternate test technique 1: Form Label bookmarklet.
- The Form Label bookmarklet may provide more detailed information on labels for fields that have errors.
- Alternate test technique 2: JAWS.
- You can use JAWS to confirm that error messages are easy to find using the screen reader.
- Press Insert+F6 see if an error heading is provided above any list of errors found on the page.
- Press Insert+F5 see a list of form field labels to verify the errors are indicated.
- Press Insert+T to listen to the page title to see if it indicates an error. (Or visually check the tile in the browser tab.
- Read the page using JAW to verify the existence of errors can be easily determined, and that the errors are easy to find and correct.
Failing WCAG Guidelines and Test Tips
For this demo, the following WCAG guidelines fail:
- 3.3.1: Error Identification
- 3.3.2: Labels or instructions
- 3.3.3: Error Suggestion