Make sure that error and alert messages are accessible to screen reader users.
General Guidelines
Provide labels or instructions when content requires user input.
Ensure that data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
Do not rely on color alone to convey the error or alert message when something is not completed correctly or missing.
Provide a description of and the nature of the error message as well as an anchor link to the location of the error messageand how to correct it. Example: “Please provide the correct date of birth. The primary applicant must be 18 years of age or older”.
Non-Compliant Error Message Treatment
...
Compliant Error Message Treatment
...
Declare form controls as invalid and display inline error messages once the form control has lost focus, or there has been an adequate delay in key presses (a few seconds)
...
Using ARIA to Create Accessible Inline Error Messages
Make inline error messages accessible to screen reader users by adding ARIA labels.
Most screen reader and browser combinations announce a form control as “required” when using the required attribute.
Prevent screen readers from announcing required form controls as invalid by default, by using aria-invalid="false".
Update the aria-invalid attribute to “true” if the current value (or lack of value) of a required control does not pass validation.
Wait to declare form controls as invalid and display inline error messages once the control has lost focus, or there has been an adequate delay in key presses (a few seconds)
Use aria-describedby on required form controls to point to an element that will contain any necessary inline error messaging.
Can’t always rely on browser’s client-side error validation to be accessible.
Create a custom client-side validation script and helpful messaging by suppressing the browser’s default validation message by adding the novalidate attribute to the form element.
Code Examples:
Default Error Message Treatment
| Code Block |
|---|
<form novalidate> <label for="name"> Name:</label> <input id="name" aria-required="true" hrequiredrequired aria-invalid="false"> </form> |
...
| Code Block |
|---|
<form novalidate> <label for="name"> Name:</label> <input id="name" aria-required="true" required aria-describedby="name_msg" aria-invalid="true"> <span id="name_msg">Please enter your name.</span> </form> <form novalidate> <label for="Email"> Email:</label> <input id="Email" aria-required="true" required aria-describedby="emal_msg" aria-invalid="true"> <span id="email_msg">The email address entered is invalid.</span> </form> |
https://codepen.io/TPG/pen/3b68c22db120c0960503fe892bb2c068
Provide Users With a List of Error Messages
In addition to using inline error message treatments it can also be helpful to list out the error messages at the top of the form.
Provide direct links to the form elements that require input or need to be corrected.
This is especially helpful when multiple required form fields have been left empty by the user.
The list of error messages can be triggered once the user has attempted to submit the form.
...
Declaring Form Controls as Invalid
...
Code Example: https://codepen.io/TPG/pen/3b68c22db120c0960503fe892bb2c068
References
Please see our forms guide for additional information on error message acceptance criteria.