Programmatically Identify the Purpose of Common Input Fields

Disabilities Affected: Cognitive, Mobility, Visual

Success Criterion: 1.3.5

Level: AA

The purpose of common form input fields that collect information about the user (like name, address, email, phone number) should be programmatically identifiable. This allows browsers and assistive technologies to enable auto-filling features.

Why It Matters

Auto-filling form fields significantly benefits users with cognitive disabilities (reducing memory load and typing effort) and motor disabilities (reducing the physical effort of typing). It also helps screen reader users by providing consistent identification of common field types across different websites.

Fixing the Issue

Use the autocomplete attribute on <input>, <select>, and <textarea> elements that collect common user information. Provide specific, standardized tokens as values for the autocomplete attribute that match the expected input type (e.g., name, email, street-address, postal-code, cc-number). Refer to the HTML specification for the full list of valid autocomplete tokens.

Good Code Example

Using autocomplete attributes on form fields:

Markup

<form action="/submit" method="post">
  <label for="full-name">Full Name:</label>
  <input type="text" id="full-name" name="name" autocomplete="name">

  <label for="email-addr">Email:</label>
  <input type="email" id="email-addr" name="email" autocomplete="email">

  <label for="addr-line1">Address Line 1:</label>
  <input type="text" id="addr-line1" name="address1" autocomplete="street-address">

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

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

  <button type="submit">Submit</button>
</form>

Bad Code Example

Form fields missing the autocomplete attribute:

Markup

<form action="/submit" method="post">
  <label for="full-name">Full Name:</label>
  <input type="text" id="full-name" name="name">

  <label for="email-addr">Email:</label>
  <input type="email" id="email-addr" name="email">

  <label for="addr-line1">Address Line 1:</label>
  <input type="text" id="addr-line1" name="address1">

  <button type="submit">Submit</button>
</form>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A practical guide for healthcare leaders navigating WCAG compliance.

Learn More

Need help with digital accessibility?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult