search

civictheme / uikit

UI atomic component-based library with Storybook integration
https://uikit.civictheme.io/
GNU General Public License v2.0
6 stars 5 forks source link

WCAG 3.3.2 A: Required fields not indicated (Issue 32) #361

Open CJE001 opened 2 months ago

CJE001 commented 2 months ago

Summary

Via Vision Australia assessment: August 2024

Impact: medium

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 "Subject" and "Message" inputs of the contact form are required fields. While this information is available programmatically for assistive technologies, this information is not provided in text.

Picture12

Code used

<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">
…
<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"></textarea>

Why this matters

When required fields are not specified, users may struggle to complete forms successfully. This can be especially problematic for users with cognitive or learning disabilities.

Expected outcome

Ensure that users are advised in text when a form contains required fields.

This can be achieved in a number of ways such as:

• Appending the text (required) to all <label> elements of required inputs • Appending a symbol, such as an asterisk (*) to all <label> elements of required inputs, and explaining the meaning of this asterisk above the form • Appending the text (optional) to all <label> elements of optional inputs, where all others are then required.

Code example

<div>
<label for="subject">
Subject (required)
</label>
</div>
<div>
<input type="text" value="…" id="subject" name="subject" required aria-invalid="false" aria-describedby="error-1">
</div>

Related issues

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

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

CJE001 commented 2 months ago

**Guideline 3.3: Input Assistance "Help users avoid and correct mistakes."

3.3.2 Labels or Instructions WCAG 2.0 Level A**

Labels or instructions are provided when content requires user input. Users with a disability are more likely to make mistakes than others, and recovery from mistakes may be more difficult. Providing simple instructions and examples of expected data format help all users, and especially people with a disability, fill out forms correctly.