WCAG 2.2 Demo Suite

1.3.5 Level AA Guideline 1.3 Adaptable Added in WCAG 2.1 Partly detectable automatically

Identify Input Purpose

The purpose of each input field collecting information about the user can be determined programmatically, using the HTML autocomplete attribute with the standard token list.

Who this affects

Users with motor disabilities benefit from autofill instead of typing. Users with cognitive disabilities benefit from tools that add familiar icons to fields. Everyone benefits from fewer keystrokes.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 1.3.5

Open the failing example in a new tab

fail.html — the problem

<h1>Delivery details</h1>

<form>
  <!-- FAILURE 1: no autocomplete attribute. The fields are properly labelled,
       so 1.3.1 and 3.3.2 pass - but nothing tells the browser that "fname"
       means the user's own given name, so autofill cannot help. -->
  <div class="field"><label for="fn">First name</label><input type="text" id="fn" name="fname"></div>
  <div class="field"><label for="ln">Last name</label><input type="text" id="ln" name="lname"></div>

  <!-- FAILURE 2: autocomplete="off" actively switches off the help. This is
       often added by habit; on fields asking for the user's own information
       it is a conformance failure. -->
  <div class="field"><label for="em">Email address</label>
    <input type="email" id="em" autocomplete="off"></div>

  <!-- FAILURE 3: autocomplete="on" is not enough. 1.3.5 requires a token from
       the specific list in the specification, so that the PURPOSE is
       machine-readable - not merely that autofill is permitted. -->
  <div class="field"><label for="ph">Mobile number</label>
    <input type="tel" id="ph" autocomplete="on"></div>

  <!-- FAILURE 4: an invented token. Not in the list, so it means nothing. -->
  <div class="field"><label for="pc">Postcode</label>
    <input type="text" id="pc" autocomplete="zip-code"></div>

  <button type="submit" class="button">Continue</button>
</form>

Meets 1.3.5

Open the passing example in a new tab

pass.html — the fix

<h1>Delivery details</h1>

<form>
  <!-- FIX: each field carries the correct token from the WCAG list of input
       purposes. Two things follow:
         1. the browser or password manager can fill the form, which matters
            enormously for users with motor and cognitive disabilities
         2. personalisation tools can identify the field's purpose and add a
            familiar icon or simplified prompt -->
  <div class="field"><label for="fn">First name</label>
    <input type="text" id="fn" name="fname" autocomplete="given-name"></div>
  <div class="field"><label for="ln">Last name</label>
    <input type="text" id="ln" name="lname" autocomplete="family-name"></div>

  <div class="field"><label for="em">Email address</label>
    <input type="email" id="em" autocomplete="email"></div>

  <div class="field"><label for="ph">Mobile number</label>
    <input type="tel" id="ph" autocomplete="tel"></div>

  <div class="field"><label for="a1">Address line 1</label>
    <input type="text" id="a1" autocomplete="address-line1"></div>
  <div class="field"><label for="ct">Town or city</label>
    <input type="text" id="ct" autocomplete="address-level2"></div>
  <div class="field"><label for="pc">Postcode</label>
    <input type="text" id="pc" autocomplete="postal-code"></div>

  <!-- Tokens can be qualified for a section of a form:
       autocomplete="billing street-address" or "shipping postal-code". -->
  <div class="field"><label for="cc">Card number</label>
    <input type="text" id="cc" inputmode="numeric" autocomplete="cc-number"></div>

  <button type="submit" class="button">Continue</button>
</form>

<!-- Scope: 1.3.5 applies only to fields collecting information ABOUT THE USER.
     A search box, a book title, or a message to customer services are all out
     of scope - there is no token for them and none is needed.

     autocomplete="off" is legitimate on a one-time code or a field where
     filling would be wrong. It is a failure on a field asking for the user's
     own name, address, phone or email. -->

How to test it

For each field asking for the user's own information (name, email, address, phone, credit card), confirm a correct autocomplete token. Note the token must come from the WCAG-defined list — autocomplete="on" is not sufficient.

  • Automated

    Scanners validate that an autocomplete value is a recognised token. They cannot confirm the token is the right one for the field.

    Relevant axe rules:

    • autocomplete-valid

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification