Visual Example
Search Default
Suggestion/Popup List Expanded
Acceptance Criteria
As a screen reader and keyboard only user I should:
be provided with an inline error message when the form control has been declared as invalid
be provided with the inline error message once the form control has lost focus, or there has been an adequate delay in key presses (a few seconds)
be provided with a description and the nature of the error message and how to correct it
When the form control has keyboard focus:
the screen reader should announce that it is a required element
When the invalid form control has lost keyboard focus:
the screen reader should announce that this is an invalid entry
the screen reader should announce how to correct the error
Markup and Code
Use ARIA to Create Accessible Inline Error Messages
Make inline error messages accessible to screen reader users by using ARIA.
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.
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.
Markup - Default Required Form Control
<form novalidate> <label for="name"> Name:</label> <input id="name" required aria-invalid="false"> </form>
Markup - Invalid Error Message
<form novalidate> <label for="name"> Name:</label> <input id="name" required aria-describedby="name_msg" aria-invalid="true"> <span id="name_msg">Please enter your name.</span> </form>