WCAG 1.3.5 AAL Inputs missing autocomplete attribute (Issue 12)

[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

Within the contact form there are inputs that collect information about the user - "Your Name" and "Your Email". These inputs do not contain the autocomplete attribute.

Code used

<input type="text" value="" class="ct-textfield ct-input__element ct-theme-light form-text" #component_theme="light" data-drupal-selector="edit-name" id="edit-name" name="name" size="60" maxlength="255">
…
<input type="email" value="" class="ct-textfield ct-input__element ct-theme-light form-email" #component_theme="light" data-drupal-selector="edit-email" id="edit-email" name="email" size="60" maxlength="254">

Why this matters

Without the autocomplete attribute present on an input, user agents (such as browsers) will not reliably be able to detect when an input is collecting specific data and present autocomplete options to users. For example, browsers use the autocomplete attribute to suggest and autofill content based on previous user input stored by the browser.

Users will instead be forced to type and remember entire values, which can be especially problematic for individuals with cognitive disabilities or who have difficulty typing.

Expected outcome

Ensure that all inputs collecting information about the user (for example, name, email address, job title, credit card number) include a valid autocomplete attribute with the appropriate value.

In this instance, give the "Your Name" input an autocomplete attribute with a value of "given-name" and the "Your Email" input an autocomplete attribute with a value of "email".

For a full list of input purposes that require the autocomplete attribute, please refer to WCAG 2.2 Section 7: Input Purposes for User Interface Components.

Code example

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

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 20 – Form input borders have insufficient contrast
• Issue 32 – Required fields not indicated
• Issue 37 – Success message not announced by screen readers

[CJE001]

1.3.5 Identify Input Purpose WCAG 2.1 Level AA

The purpose of each input field collecting information about the user can be programmatically determined when:

• The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
• The content is implemented using technologies with support for identifying the expected meaning for form input data.

People with disabilities affecting executive function, decision making, language and memory, or people with motor impairments and conditions affecting their communication skills may have difficulty filling in online forms. Therefore the ability to auto-complete forms will reduce the need for manual input, and icons can be used by assistive technology to help identify the input purpose visually.