WCAG 1.3.1 A: Error messages not programmatically associated with input (Issue 7)

[CJE001]

Summary

Via Vision Australia assessment: August 2024

Impact: low

Note: DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au.

Steps to reproduce

Contact digital.gov.au beta | digital.gov.au (https://www.digital.gov.au/contact)

Observed outcome

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.

Subject input error message

Message input error message

Code used

Subject input – invalid state

<input type="text" value="test" class="ct-textfield ct-input__element ct-theme-light form-text required" #component_theme="light" data-drupal-selector="edit-subject" id="edit-subject" name="subject" size="60" maxlength="255" required="required" aria-required="true">

Message input and error message - invalid state

<textarea class="ct-textarea ct-input__element ct-theme-light ct-input--required required " rows="5" required="" #civictheme_theme="light" #component_theme="light" data-drupal-selector="edit-message" id="edit-message" name="message" cols="60" aria-required="true" aria-invalid="true"></textarea>
…
<div class="ct-field-message ct-theme-light ct-field-message--error ct-form-element__message">
<svg class="ct-icon ct-icon--size-regular ct-field-message__icon" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…
</svg>
Message field is required. 
</div>

Why this matters

When error messages are not programmatically associated with their corresponding inputs, or are not presented as persistent text, users may struggle to understand what is needed to correct errors or remember which input contained the error.
When information on an input's state is not available, users may not be aware that errors exist.

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.

Code example

<form novalidate>
…
<div>
<label for="subject">
Subject
</label>
</div>
<div>
<input type="text" value="…" id="subject" name="subject" required aria-invalid="true" aria-describedby="error-1">
</div>
<div id="error-1">
You must enter a subject
</div>
<div>
<label for="message">
Message
</label>
</div>
<div>
<textarea id="message" required aria-invalid="false" aria-describedby="error-2"></textarea>
</div>
<div id="error-2">
</div>

Related issues

For other issues related to this component, please refer to:

• Issue 6 – Label not programmatically associated with input
• Issue 12 – Inputs missing autocomplete attribute
• Issue 20 – Form input borders have insufficient contrast
• Issue 32 – Required fields not indicated
• Issue 37 – Success message not announced by screen readers

[alan-cole]

Within the field.twig file, the error message should be provided an id="{{ message_id }}" attribute, and the input should be provided with an aria-describedby="{{ message_id }}" attribute. In this case message_id could just be the id + '-error'.