---
title: "Do autocomplete attributes align with their purpose?"
date: "2025-03-13T11:18:22+00:00"
summary: "Improve form accessibility with proper autocomplete attributes. Learn to align input fields with their purpose for better user experience."
image:
type: "page"
url: "/web-governance/do-autocomplete-attributes-align-their-purpose"
id: "33fd7be5-fd68-4b9a-bab6-5a5cd16197e8"
---

Table of contents will be added

1.3.5 Identify Input Purpose

Introduction
------------

This document provides information about the Acquia Web Governance accessibility check:

*   Do autocomplete attributes align with their purpose?

What
----

This check ensures that websites provide `autocomplete` attributes for form inputs and that they align with their intended purpose. 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 that is 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.

Who
---

### Affected users

This check primarily benefits users with:

*   Cognitive disabilities: Who may struggle with form completion.
*   Visual impairments: Who use screen readers that announce autofill suggestions.
*   Motor impairments: Who rely on autofill to minimize typing.
    

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"`.
    

How
---

This section provides instructions on how to review and fix the issue.

### How to review it

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

1.  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.
    
2.  Check the `autocomplete` attribute.
    1.  Open Developer Tools (F12) → Elements Tab.
    2.  Locate the `<input>` element.
    3.  Check the value of its `autocomplete` attribute.
3.  Compare with valid `autocomplete` values.
    1.  Refer to [the list of valid autocomplete values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).
    2.  If the value does not match the intended purpose for the field, you must 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

[1.3.5 Identify Input Purpose](https://dequeuniversity.com/resources/wcag2.1/1.3.5-identify-input-purpose)