Features
Start a free trial

Ensure the autocomplete attribute is correct and suitable for the form field

Rule ID: autocomplete-valid User Impact: serious Guidelines: WCAG 2.1

The autocomplete attribute provides guidance to browsers on how to autofill form fields with user data. Using this attribute correctly enhances accessibility and usability for users, including those relying on assistive technologies.

About This Rule

This guideline ensures the proper use of the autocomplete attribute, enhancing accessibility and usability for all users. Adhering to this practice aligns with the following standards:

  • WCAG 2.1 (AA): 1.3.5 Identify Input Purpose
  • WCAG 2.0 (AA): 1.3.5 Identify Input Purpose
  • Trusted Tester: 13.A - The purpose of each input field collecting information about the user can be programmatically determined.
  • EN 301 549: 9.1.3.5 Identify Input Purpose

Why It Matters

The autocomplete attribute helps users complete forms quickly by leveraging previously entered or saved information. Proper implementation ensures accurate autofill, reduces errors, and enhances the user experience for people with disabilities, such as cognitive impairments. It also improves compliance with WCAG Success Criterion 1.3.5: Identify Input Purpose.

How to Fix

To use the autocomplete attribute correctly:

  • Use Standard Tokens: Specify valid tokens for the autocomplete attribute, such as name, email, tel, address-line1, etc. Invalid tokens are ignored by browsers.
    Copy code
    <input type="text" name="first-name" autocomplete="given-name">
<input type="email" name="email" autocomplete="email">
  • Ensure the Attribute Matches the Field Purpose: Match the value of the autocomplete attribute to the field's purpose to provide meaningful autofill suggestions.
    Copy code
    <input type="text" name="street-address" autocomplete="address-line1">
  • Disable Autofill When Necessary: For fields where autofill is inappropriate, set autocomplete="off".
    Copy code
    <input type="password" name="new-password" autocomplete="off">
  • Use Autofill Sectioning: Group related fields using the same autocomplete section name (e.g., billing, shipping).
    Copy code
    <input type="text" name="billing-name" autocomplete="billing name">
<input type="text" name="billing-address" autocomplete="billing address-line1">

Examples

Incorrect

An autocomplete attribute with an invalid token:

Copy code
<input type="text" name="address" autocomplete="invalid-token">

Correct

An autocomplete attribute with a valid token:

Copy code
<input type="text" name="address" autocomplete="address-line1">

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: