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.

Comments

hotwebmatter created an issue. See original summary.

hotwebmatter’s picture

The patch above contains contributions from Nathan Dentzau and Matthew Obert at Oomph, Inc.

hotwebmatter’s picture

Issue summary: View changes
hotwebmatter’s picture

Issue summary: View changes
norman.lol’s picture

Title: Accessibility Attributes » Add accessibility attributes
Version: 7.x-1.46 » 4.0.x-dev
Component: Webform Validation » Code
Assigned: hotwebmatter » Unassigned
Category: Bug report » Feature request
Issue tags: -Quick fix

Let's make this a feature request.

Would probably be good to review the description again after 5 and a half years.

Tasks:

  • Use aria-live="assertive" or role="alert" on error message containers. This ensures screen readers announce new errors as soon as they appear.
  • Link error messages to fields using aria-describedby.