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. (Level A)
Description
Submitting a web form and retrieving information on websites is quite common on today’s interactive web space. By following some best practices web forms can be made accessible for users with disabilities. Read the articles Form elements and accessibility and Forms and Error Handling to know more about the best practices.
When the form submission is not successful error messages will be displayed to intimate the user. In many cases these error messages are not informed to those who use screen readers. Letting the users aware that the error has occurred will be helpful to correct and resubmit the form.
Input errors may occur on the page due to the following 2 reasons as mentioned in the definition by W3C WCAG 2.0
- information that is required by the web page but omitted by the user, or
- information that is provided by the user but that falls outside the required data format or allowed values.
Check the following points to ensure that your web form is as per WCAG 2.0 3.3.1 Error Identification
- Provide a specific error message that clearly describes the field in error instead of providing a generic statement such as “Correct the fields in error and resubmit the formâ€.
- Provide an indication to intimate the error message that is not dependent only on users senses.
- Mannage the user focus to the error section or the first field in error.
- The error message displayed is intimated to the user when focused to the field in error using screen reader or an alert is provided describing the error message.
In addition to the error messages, aria-invalid(state) is used for intimating the user that the input provided falls outside the accepted values. Aria-required helps to prevent the users from ignoring the mandatory fields.
Have a look at the simple example of error validation
with aria-describedby using javascript focus method and alert.