autocomplete-valid

The autocomplete attribute must be used correctly.

Description

When implemented correctly, autocomplete enables browsers to suggest values for form fields based on previous user input, making it quicker and more convenient for users to fill out forms. To ensure proper functionality with screen readers, it is essential to use valid and appropriate autocomplete attribute values.

Why is it important?

If autocomplete values are not provided or are invalid in form fields, the content becomes inaccessible. Screen readers are unable to read form fields that lack the necessary autocomplete attribute values. This lack of information hinders users’ ability to navigate forms accurately, as screen readers cannot provide the necessary guidance for interacting with form fields.

Examples

• Success:

  • <input> element with attributes type="text" and autocomplete="family-name", The browser is able to suggest a value based on previous user input.

• Failure:

  • <input> element with attributes type="text" and autocomplete="first-name". This is not a valid vallue for the autocomplete attribute, so the browser is unable to suggest a value.

How to fix?

Ensure that the “autocomplete” attribute value is chosen from the specified list of 53 common personal data values, known as the “Input Purposes for User Interface Components” defined by the Web Accessibility Initiative (WAI). It is crucial to use only valid values from this list for the autocomplete attribute.

Tags

cat.forms, wcag21aa, wcag135

References

• WCAG 1.3.5: Identify Input Purpose
• WCAG 2.1 Technique H98
• Deque University: autocomplete-valid
• Accessibility Insights: autocomplete-valid
• Evinced Digital Accessibility Knowledge Base: autocomplete-valid