Autocomplete Tokens

Checks that name, email, phone, address and payment fields carry the correct autocomplete token

Rule ID	a11y/autocomplete-tokens
Category	Accessibility
Scope	Per-page
Severity	warning
Weight	5/10

What it checks

The rule works out what each field is for from its name, id, label and placeholder, then checks the autocomplete token against that purpose. Only fields whose purpose is unambiguous are considered, so a field called capacity is never read as a city and hotel is never read as a phone number.

Outcome	When
pass	Every identified field carries a correct token
warn	An identified field has no token, or turns autofill off
fail	A token is not in the spec, or belongs to a different purpose
skipped	No field on the page has an identifiable purpose

Each finding names the exact node with a selector and the field’s opening tag.

Solution

Give every field that collects a person’s own data the matching WHATWG autofill token, e.g. autocomplete="given-name", "email", "tel", "address-line1", "postal-code", "cc-number". Browsers and password managers fill those fields in one tap, which is the difference between a completed checkout and an abandoned one, and WCAG 2.1 success criterion 1.3.5 (Identify Input Purpose) requires it.

Tokens may be prefixed with section-*, shipping/billing and home/work/mobile:

<label for="ship-street">Address line 1</label>
<input id="ship-street" name="shippingAddressLine1" type="text"
       autocomplete="shipping address-line1" enterkeyhint="next">

A token the browser does not recognise is ignored outright, so a typo like autocomplete="firstname" is worse than nothing: use given-name. Avoid autocomplete="off" on personal data. It does not stop autofill in modern browsers, it only stops the accurate kind.

Enable / Disable

Disable this rule

[rules]
disable = ["a11y/autocomplete-tokens"]

Disable all Accessibility rules

[rules]
disable = ["a11y/*"]

Enable only this rule

[rules]
enable = ["a11y/autocomplete-tokens"]
disable = ["*"]