1.3.5 Identify Input Purpose

Introduction

This document provides information about the Acquia Web Governance accessibility (glossary term, activate to view definition) check:

• Do autocomplete attributes align with their purpose?

1.3.5 Identify Input Purpose

Introduction

This document provides information about the Acquia Web Governance accessibility (glossary term, activate to view definition) 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:

  copy

  <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:

  copy

  <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:

  copy

  <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:

  copy

  <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:

  copy

  <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.
   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:

  copy

  <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:

  copy

  <!-- 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:

  copy

  <input type="text" name="street-address" autocomplete="street-address">

Additional resources

WCAG success criteria

1.3.5 Identify Input Purpose