Skip to main content
No Result Found

autocomplete-valid

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

Severity: Serious

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.

Incorrect Sample
Copy icon Copy

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.

Correct sample with autocomplete
Copy icon Copy

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.

Correct sample with name
Copy icon Copy

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:

References

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle