Success Criterion 1.3.5
Conformance level AA

Autocomplete Token Placed on the Wrong HTML Element

1.3.5 — Identify Input Purpose

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

Token on the wrong control (on the fieldset wrapper, or a non-input element) so it doesn't apply.

Example

<fieldset autocomplete="email">
  <legend>Save your progress</legend>
  <input type="email" id="email" name="email">
</fieldset>

Why it matters

Right after finishing the first lesson, a learner is prompted to save their progress by entering an email, but the browser offers no autofill suggestion because the autocomplete attribute sits on the fieldset instead of the input itself.

How to test

Inspect where the autocomplete attribute is placed in DevTools: it must be on the actual input, not on a wrapping fieldset or non-input element, or it won't apply.

How to fix

Place the autocomplete token directly on the input, select, or textarea element, never on a wrapper, so the save-progress prompt can offer the same autofill support as the rest of the app.

<fieldset>
  <legend>Save your progress</legend>
  <input type="email" id="email" name="email" autocomplete="email">
</fieldset>

Outcome

A learner finishing their first lesson now gets an autofill suggestion for their email the moment the save-progress prompt appears.

Who is affected

Learners relying on autofill, including people with motor and cognitive disabilities, get no assistance saving their progress since the token never reaches a real form control.

Learn more

Understanding Understanding document (opens in a new tab)