Autocomplete attribute must be used correctly
Estimated effort: about 10 minutes.
The autocomplete attribute tells the browser (and assistive technology) what kind of personal data a form field expects, such as a name, email, or shipping address. On checkout forms this both speeds up form-filling for every visitor and gives some assistive technologies extra context about the field's purpose. Using an invalid or misspelled autocomplete value means the field loses this benefit, and fails this WCAG check.
How to fix it
- Identify checkout, billing, and shipping address fields that collect personal data — name, address lines, city, postcode, country, phone, email, and card details (where applicable).
- Set the autocomplete attribute on each field to one of the standard HTML Autofill tokens: e.g. autocomplete="given-name", "family-name", "email", "tel", "address-line1", "address-level2" (city), "postal-code", "country". Use "off" only when autofill is genuinely inappropriate for that field.
- For billing vs. shipping duplicates of the same field type on the same page, prefix the token with the section, e.g. autocomplete="section-billing billing address-line1" for the billing address line and autocomplete="section-shipping shipping address-line1" for the shipping one, so the browser doesn't merge the two.
- Double-check the exact spelling of each token against the standard list — a misspelled or made-up token (e.g. "email-address" instead of "email") is treated as invalid.
- Re-check the checkout form's rendered HTML to confirm every personal-data field has a valid, correctly spelled autocomplete value.
WooCommerce note
WooCommerce's core WC_Countries::get_address_fields() method already assigns autocomplete values to standard billing/shipping address fields by default, prefixing each with its section and address type (for example, a billing address line becomes autocomplete="section-billing billing address-line1") so out-of-the-box WooCommerce checkout fields are generally already using valid tokens. If this issue appears on a checkout page, check for a checkout-field customization plugin or custom field added via the woocommerce_billing_fields/woocommerce_shipping_fields filters that introduced a field without a valid autocomplete value.
Before and after
Before
<label for="billing_email">Email address</label>
<input type="email" id="billing_email" name="billing_email" autocomplete="email-address">
After
<label for="billing_email">Email address</label>
<input type="email" id="billing_email" name="billing_email" autocomplete="section-billing billing email">