- Success Criterion 1.3.5
- Conformance level AA
Combined Field Whose Autocomplete Token Fits Only One Use Case
1.3.5 — Identify Input Purpose
Scenario
Setting
A budget airline's flight search results
What’s wrong
A multi-purpose field (e.g., "email or mobile number") tagged with a single token matching only one, or neither — of its accepted purposes.
Example
<div class="member-fares-banner">
<p>Sign in to see member fares</p>
<label for="identifier">Email or mobile number</label>
<input id="identifier" name="identifier" type="text" autocomplete="email">
</div> Why it matters
Scanning flight search results, a traveler taps the "Sign in to see member fares" banner and, since they normally sign in with their phone number, gets only email autofill suggestions and never sees their saved phone number offered.
How to test
Inspect a combined field (e.g., 'email or mobile number'): check whether its single autocomplete token can represent both accepted input types — if it only matches one, it fails.
How to fix
For a field that genuinely accepts more than one input purpose, use a token like "username" that does not limit autofill to just one of them, or split the sign-in banner into two separate fields.
<div class="member-fares-banner">
<p>Sign in to see member fares</p>
<label for="identifier">Email or mobile number</label>
<input id="identifier" name="identifier" type="text" autocomplete="username">
</div> Outcome
From the search results banner, a traveler now gets autofill suggestions regardless of whether they sign in with email or phone.
Who is affected
Users who prefer signing in by phone number from the search-results banner, and anyone relying on autofill for either option, only get suggestions for the token that was chosen.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Autocomplete Attribute Set to the Wrong Value for the Field
- Personal-Data Field With No Autocomplete Attribute at All
- Autocomplete Deliberately Disabled on a Personal-Data Field
- Autocomplete Token Placed on the Wrong HTML Element
- Custom Form Widget That Drops the Native Autocomplete Behavior
- Autocomplete Section Token Used Incorrectly, Breaking Its Value