1.3.5 Identify Input Purpose

Level: AA | Principle: Perceivable | Since: WCAG 2.1 | Automation: Partial (axe-core)

What This Means

Input fields that collect personal information about the user must have a programmatically determinable purpose, typically through the autocomplete attribute. This allows browsers, password managers, and assistive technologies to automatically fill in form fields, and enables user agents to present familiar icons or symbols alongside inputs.

The criterion applies to inputs that map to the HTML autocomplete token list — things like name, email, phone number, address, birthday, and credit card information. If a field collects one of these types of data, it must declare its purpose with the correct autocomplete value.

Who This Affects

  1. Users with cognitive disabilities — autocomplete and familiar icons help them understand what each field expects
  2. Users with motor impairments — auto-filling reduces the amount of typing required
  3. Users with memory difficulties — they do not need to remember personal details for every form
  4. All users — autocomplete speeds up form completion for everyone

Common Pitfalls

1. Name field with no autocomplete attribute

<!-- Bad: no autocomplete on a field collecting the user's name -->
<label for="name">Full Name</label>
<input type="text" id="name" name="name">

2. Wrong autocomplete value

<!-- Bad: "name" is not a valid autocomplete token; should be "name" for full name -->
<label for="email">Email</label>
<input type="email" id="email" autocomplete="username">
<!-- "username" is for login identifiers, not general email collection -->

3. Address fields without specific autocomplete tokens

<!-- Bad: generic names with no autocomplete -->
<input type="text" name="addr1" placeholder="Address Line 1">
<input type="text" name="addr2" placeholder="Address Line 2">
<input type="text" name="city" placeholder="City">

4. Autocomplete set to "off" on personal data fields

<!-- Bad: disabling autocomplete on a field that collects personal info -->
<label for="phone">Phone Number</label>
<input type="tel" id="phone" autocomplete="off">

How to Fix

Add correct autocomplete attributes to personal data fields

<!-- Good: each field declares its purpose -->
<label for="fname">First Name</label>
<input type="text" id="fname" autocomplete="given-name">

<label for="lname">Last Name</label>
<input type="text" id="lname" autocomplete="family-name">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

<label for="phone">Phone Number</label>
<input type="tel" id="phone" autocomplete="tel">

Address fields with proper tokens

<!-- Good: specific autocomplete tokens for address components -->
<label for="street">Street Address</label>
<input type="text" id="street" autocomplete="street-address">

<label for="city">City</label>
<input type="text" id="city" autocomplete="address-level2">

<label for="state">State</label>
<input type="text" id="state" autocomplete="address-level1">

<label for="zip">Postal Code</label>
<input type="text" id="zip" autocomplete="postal-code">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country-name">

Credit card fields

<!-- Good: payment fields with correct autocomplete -->
<label for="cc-name">Name on Card</label>
<input type="text" id="cc-name" autocomplete="cc-name">

<label for="cc-num">Card Number</label>
<input type="text" id="cc-num" autocomplete="cc-number">

<label for="cc-exp">Expiration Date</label>
<input type="text" id="cc-exp" autocomplete="cc-exp">

How to Test

  1. Open DevTools (F12) and inspect each form field that collects personal information (name, email, phone, address, credit card).
  2. Check that each field has an autocomplete attribute with the correct token from the HTML specification (e.g., given-name, email, tel, street-address).
  3. Verify the autocomplete values are valid by cross-referencing the WCAG input purposes list.
  4. Test the form in a browser and confirm the browser's autofill correctly populates the fields.
  5. Pass: Every personal data field has a correct autocomplete attribute, and browser autofill works properly.
  6. Fail: Any personal data field is missing autocomplete, has an incorrect value, or uses autocomplete="off" on fields that collect personal information.

axe-core Rules

| Rule | What It Checks | |------|---------------| | input-autocomplete-valid | autocomplete attribute values must be valid tokens from the HTML specification |

Sources

  1. W3C WCAG 2.2 — Understanding 1.3.5