autocomplete attribute must be used correctly

What’s actually happening

axe flags an autocomplete value it can't parse against the HTML spec's token grammar. The field still accepts typing, but the browser won't reliably autofill it, and AT that uses autocomplete to identify a field's purpose (WCAG 1.3.5, Identify Input Purpose) gets nothing useful. Common shape: someone writes autocomplete="e-mail" or "firstname" or "phone" — none of which are real tokens — and assumes it works because nothing visibly breaks. Users who rely on autofill (motor impairments, cognitive load, anyone who hates retyping) lose it silently.

Common causes

• A made-up or misspelled token: "e-mail" instead of "email", "firstname" instead of "given-name", "phone" instead of "tel", "zip" instead of "postal-code"
• Tokens in the wrong order, e.g. autocomplete="name shipping" — the section/group tokens (shipping, billing) must come before the field name, not after
• A field-type mismatch: autocomplete="cc-number" on a type="date" input, or a credit-card token on a non-payment field, which the check rejects as nonsensical for that control
• autocomplete="true" or autocomplete="yes" — people confuse the on/off form with the detailed-token form; only "on" and "off" are valid bare keywords
• A multi-token value with a typo'd group prefix like "shiping address-line1" or a missing space so the tokens fuse into one unrecognized string

How to fix it

1. Use the exact spec tokens for each fieldThe common ones: given-name, family-name, name, email, tel, organization, street-address, address-line1/2, address-level2 (city), address-level1 (state), postal-code, country, cc-name, cc-number, cc-exp, cc-csc. Match the token to what the field collects. autocomplete="email" on the email input, autocomplete="tel" on the phone input.
2. Order multi-part tokens correctlyThe grammar is: optional section-* , then optional shipping or billing , then for contact details optional home/work/mobile/fax/pager , then the field-name token, then optional webauthn. So a billing postcode is autocomplete="billing postal-code" — group word first, field name last. Never "postal-code billing".
3. Pick the right token for the field's typeDon't put cc-number on a text field that isn't a card number, or bday on a free-text box. If you want the three-part birthday, use bday-day, bday-month, bday-year on separate numeric inputs. The check rejects tokens that can't apply to the control they're on.
4. For non-fillable fields, use "off" — sparinglyautocomplete="off" is valid and stops autofill (one-time codes, fields you never want remembered). But browsers increasingly ignore "off" for login and address fields to protect users, so don't lean on it for those. Use a real token whenever the field has a known purpose.
5. Verify with real autofillRe-run axe to clear the format error, then trigger the browser's autofill (Chrome: Settings → Autofill, save a profile, then focus the field). If the right value drops in, the token is both valid and correct. A token can be spec-valid yet wrong for the field, and only autofill behavior shows that.