Ensure input fields with autocomplete attributes align with their intended purpose

1.3.5 Identify Input Purpose

Introduction¶

This check ensures that websites provide autocomplete attributes for form inputs and that they align with their intended purpose.

What¶

The autocomplete attribute helps browsers suggest relevant values when users fill out forms.

When an input field includes an autocomplete attribute, it should correctly describe the type of data being requested.

Common autocomplete values include:

autocomplete="name" for full name
autocomplete="email" for email addresses
autocomplete="tel" for phone numbers
autocomplete="street-address" for street addresses

When is this applicable?¶

This check applies to web pages that contain input fields with an autocomplete attribute.

Why¶

Proper use of the autocomplete attribute enhances both usability and accessibility in the following ways:

It saves time because it allows browsers to autofill fields with stored user data.
It reduces errors for users with cognitive disabilities, dyslexia, or mobility impairments.
It improves consistency because it ensures that data is entered in a standardized format.

When autocomplete attributes are incorrectly assigned, users may experience:

Autofill suggestions that do not match the expected input.
Confusion about what information is required.
Frustration when forms do not fill in correctly.

Examples¶

This section provides pass and fail examples of this check.

Pass examples¶

Correct autocomplete values that match the purpose of the input field:
```
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="email">
</form>
```
The autocomplete="email" attribute in this example correctly identifies the field as an email input.

A form with properly assigned autocomplete attributes for multiple fields:

<form>
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="fname" autocomplete="given-name">
  
  <label for="lname">Last Name:</label>
  <input type="text" id="lname" name="lname" autocomplete="family-name">
</form>

The given-name and family-name values ensure that the browser autofills the first and last names separately.

Fail examples¶

Incorrect or misleading autocomplete attributes:

<form>
  <label for="phone">Phone Number:</label>
  <input type="text" id="phone" name="phone" autocomplete="street-address">
</form>

In this example, autocomplete="street-address" is incorrect for a phone number field.

Irrelevant autofill suggestions.
The autocomplete value does not match the expected input type:
```
<form>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email" autocomplete="password">
</form>
```
In this example, autocomplete="password" is not appropriate for an email field.
Non-existent or custom value:
```
<form>
  <label for="dob">Date of Birth:</label>
  <input type="text" id="dob" name="dob" autocomplete="dateofbirth">
</form>
```
In this example, autocomplete="dateofbirth" is not a valid attribute.
The correct value is autocomplete="bday".

Affected users¶

This check primarily benefits:

Users with motor impairments who rely on autofill to minimize typing.
Users with cognitive disabilities who may struggle with form completion.
Blind and visually impaired users who use screen readers that announce autofill suggestions.

How¶

This section provides instructions on how to review and fix autocomplete issues.

How to review autocomplete attributes¶

When this check flags an input field, follow these steps:

Identify the purpose of the field.
Read the field label and determine the kind of data that is expected, for example, name, email, or address.
Check the autocomplete attribute.
1. Open Developer Tools (F12) → Elements Tab.
2. Locate the <input> element.
3. Check the value of its autocomplete attribute.
Compare with valid autocomplete values.
1. Refer to the list of valid autocomplete values.
2. If the value does not match the intended purpose for the field, fix it.

How to fix it¶

This section provides several methods that you can use to fix the issue.

Use the correct autocomplete value.
Ensure that the autocomplete attribute accurately describes the input field:
```
<input type="tel" id="phone" name="phone" autocomplete="tel">
```

Remove or correct invalid autocomplete values.

If there is an incorrect or custom autocomplete value, update it or remove it:

<!-- Incorrect -->
<input type="text" id="dob" name="dob" autocomplete="dateofbirth">
<!-- Correct -->
<input type="text" id="dob" name="dob" autocomplete="bday">

Use standardized field names.
Some browsers rely on input name attributes for autofill suggestions. Use consistent names to improve autofill accuracy:
```
<input type="text" name="street-address" autocomplete="street-address">
```

Additional resources¶

WCAG Success Criteria¶