autocomplete-valid

Use the autocomplete attribute appropriately or define a standard name attribute on form fields.

Description

The autocomplete attribute enables browsers to suggest values for form fields based on previous user input. Even if you don’t use the autocomplete attribute, modern browsers are smart to recognize standard entries in the name attribute of a field to suggest autocomplete values on form fields.

These suggestions make it quicker and easier for users to fill out forms.

To ensure proper functionality with screen readers, it is essential to either use appropriate autocomplete attribute values or use standard entries in the name attribute of a field.

This rule is flagged when BrowserStack Accessibility Testing detects that the value of autocomplete or name attribute is not from a standard list.

Why is it important?

Using a relevant autocomplete attribute or using standard entries in the name attribute in form fields is crucial for accessibility. This practice enhances the user experience for individuals with disabilities. It enables assistive technologies to predict and auto-fill form inputs accurately. This ensures efficient navigation and reduces the burden on the users to input entries manually.

Example

In the following HTML code snippet, the field family name has no autocomplete attribute. The name attribute is defined as surname, which is not part of the standard autocomplete values. So this piece of HTML code breaks the autocomplete-valid rule.

However, in the following HTML code snippet, a valid autocomplete attribute is added to it. So, this piece of HTML does not break the autocomplete-valid rule.

There is no autocomplete attribute for the field family name in the following HTML code snippet. However, the name attribute is correctly defined as family-name, which is a standard autocomplete attribute value. So, this piece of HTML does not break the autocomplete-valid rule.

These examples are only for demonstration and may not present an optimal HTML implementation.

How to fix?

If this rule gets flagged as “Needs Review” on your site, you can fix it in any of the following methods:

Using the autocomplete attribute

Follow these steps to fix violations of the autocomplete-valid rule using the autocomplete attribute:

• Add the autocomplete attribute to all the form fields and set it to a relevant value based on the field type.

• Ensure that the autocomplete attribute and its value are spelled correctly.

• If no standard name exists for the form field (eg: College ID), set autocomplete = "off".

Using the name attribute

Follow these steps to fix violations of the autocomplete-valid rule using the name tag:

• The name attribute of the form field must be from this standard list of form field names.

• If no standard name exists for the form field (eg: College ID), set autocomplete = "off".

References

• WCAG 1.3.5: Identify Input Purpose
• WCAG 2.1: Technique H98
• Accessibility Insights: autocomplete-valid