autocomplete attribute must be used correctly

The autocomplete content attribute can be used to hint to the user agent how to, or indeed whether to, link a pre-defined value to the input field in order to provide auto-fill suggestions (such as your address). This suggetion can people who have difficulty typing and also lets assistive technologies add icons to indicate input type for people with cognitive issues.

Defining the expected data format for a specific input field enhances the ease of completing forms, particularly benefiting individuals with cognitive disabilities. For instance, the "type=password" attribute designates the input type but does not clarify its intended use.

For example, autocomplete values like "new-password" and "current-password" offer a robust method for specifying the input's purpose.

<form>
<input id="name" autocomplete="family-name" name="name" aria-required="true"
        placeholder="Sur Name" required>
<input id="given-name" autocomplete="given-name" name="given-name" aria-required="true"
        placeholder="Name" required>
</form>

The above example might be improved by using the broader field "name" instead of family-name as many cultures have different naming conventions where the order is different from Western cultures.

Screen readers

Screen readers do not read identified autocomplete form fields if the appropriate autocomplete attribute values are missing. Users cannot correctly navigate forms when screen readers cannot provide adequate information to the user regarding form field interaction requirements.

Fixing the problem

Identify any form elements that accept an individual's personal data.

For each form element that accepts an individual's personal data:

1. Check to see if the personal data is one of the 53 types identified in WCAG 2.1 Section 7 Input Purposes for User Interface Components opens in a new window.
2. Confirm that the autocomplete attribute is set with the appropriate value to identify the purpose of that UI component.