Ensure Clientside Validation error messages are accessible.
WCAG Criteria: 3.3 Input Assistance -> 3.3.1 Error Identification
- Invalid inputs need to use
aria-invalid=true
WCAG Criteria: 3.3 Input Assistance -> 3.3.3 Error Suggestion
- Error messages have been added, but they are not being announced to assistive technology. They should be given
role="alert"so that they are announced when users tab out of the field. - This also corresponds to 1.4.1 Use of Color. The red background on the validation message indicates a field in error. Color cannot be the only means of conveying information.
Logic was added to toggle true/false for the attribute aria-invalid on all form elements. Also the aria-describedby attribute is added to the form element if the element is in an error state referencing the error message.
Logic was added to add role="alert" to the error messages so that they are announced when users tab out of the field.
This patch represents a quick fix, since it only addresses
case 5: // CLIENTSIDE_VALIDATION_AFTER_INPUT
of the Webform Validation component.
I am working on a more complete fix, adding the Accessibility attributes wherever they are needed, which I plan to report as a Feature Request to the 7.x-1.46+0-dev branch.
| Comment | File | Size | Author |
|---|---|---|---|
| clientside_validation-accessibility_attributes.patch | 1.57 KB | hotwebmatter |
Comments
Comment #2
hotwebmatter commentedThe patch above contains contributions from Nathan Dentzau and Matthew Obert at Oomph, Inc.
Comment #3
hotwebmatter commentedComment #4
hotwebmatter commentedComment #5
norman.lolLet's make this a feature request.
Would probably be good to review the description again after 5 and a half years.
Tasks:
aria-live="assertive"orrole="alert"on error message containers. This ensures screen readers announce new errors as soon as they appear.aria-describedby.