Contrib.social

WCAG 1.3.1 A: Error messages not programmatically associated with input

Open on Drupal.org →
Created on 24 February 2025, about 2 months ago

Problem/Motivation

The contact form relies on the browser's default client-side validation for the "Subject" field. This validation does not convey the invalid state of inputs to assistive technology, nor is the error message programmatically associated with its corresponding input.
Additionally, the error message is not persistent, and vanishes once focus leaves the input.
The "Message" input uses a customised error message; however, it is not programmatically associated with the input.

Steps to reproduce

  1. Create a webform with required fields
  2. Fill and submit the form leaving a required field empty
  3. Observe the error messages and click somewhere on the form to see the error disappear

Expected outcome

  • Ensure that when inputs are in an error state, error messages are displayed as persistent text that is programmatically associated with the corresponding input.
  • The error state should also be programmatically conveyed to users. This can be achieved by disabling the browser client-side validation and providing custom inline error messages, the aria-describedby and aria-invalid attributes:
    • Disable the browser client-side validation via the novalidate attribute on the element. Implement custom validation scripts and error messages.
    • Add the aria-describedby attribute to all inputs that may require an error message. Match its value to the id attribute of the element that will contain the corresponding error message. This creates a programmatic association between the error message and the input and ensures that screen readers announce the error message when the input receives focus.
    • When an input is in an error state, inject the error container with an error message. Ideally, provide other visual cues in addition to the error text, such as a solid dark red border and an error icon.
    • Add the aria-invalid attribute to all required fields with a value of "false". Update this to "true" when the input is in an error state.

Proposed resolution

See https://github.com/civictheme/uikit/issues/37

🐛 Bug report
Status

Needs review

Version

1.9

Component

Code

Created by

fionamorrison23

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024