WCAG 1.3.5: Identify Input Purpose

WCAG 1.3.5: Identify Input Purpose

WCAG 1.3.5, part of the WCAG 2.1 guidelines at Level AA, mandates that the purpose of each input field collecting user information must be programmatically determinable. This success criterion is crucial for improving the accessibility and usability of forms by allowing browsers and assistive technologies to understand the expected type of information for various input fields.

By explicitly defining the purpose of input fields, users can benefit from enhanced features such as autofill, predictive text, and personalized assistance, making form completion faster, easier, and less prone to errors.

Why Identify Input Purpose Matters

The ability to programmatically determine the purpose of an input field significantly impacts several user groups:

• Users with Cognitive Disabilities: For individuals with cognitive or learning disabilities, understanding the exact nature of an input field can be challenging. Clear programmatic identification, often through an autofill mechanism, can reduce cognitive load and prevent frustration by suggesting or automatically filling correct information.
• Users with Language and Memory Impairments: Remembering and accurately typing personal information (like name, address, or phone number) can be difficult. Autofill features, enabled by this criterion, can mitigate these challenges.
• Users of Speech Input Software: Speech users often rely on labels and semantic information to interact with forms. When an input field’s purpose is clear, speech input software can more reliably parse the field and provide accurate input options.
• Users of Mobile Devices: On small screens or with limited input methods, autofill significantly speeds up form completion, reducing the need for extensive typing.
• All Users: Anyone benefits from the convenience and efficiency of autofill, which minimizes typing and potential errors, leading to a smoother user experience.

Success Criteria and Requirements

WCAG 1.3.5 states:

The purpose of each input field collecting user information can be programmatically determined when:

• The input field is intended to collect information about the user that is a common input purpose listed in the Input Purposes for User Interface Components section; and
• The content is implemented using technologies with support for identifying the expected meaning for form input data.

The primary mechanism for meeting this criterion in HTML is the autocomplete attribute. This attribute takes a token (or a set of tokens) that corresponds to specific types of user information, as defined by the HTML Living Standard’s Autofill section and subsequently referenced by WCAG 2.1.

Relevant HTML autocomplete Tokens

Some of the commonly used autocomplete tokens include:

• name (full name)
• honorific-prefix (e.g., Mr., Ms., Dr.)
• given-name (first name)
• family-name (last name)
• email (email address)
• organization (company name)
• street-address (street address)
• address-line1, address-line2, address-line3 (parts of the street address)
• address-level2 (city/locality)
• address-level1 (state/province)
• postal-code (zip/postal code)
• country (country code)
• tel (full telephone number)
• bday (birth date)
• current-password, new-password
• cc-name (name on credit card)
• cc-number (credit card number)
• cc-csc (credit card security code)

Practical Guidelines for Compliance

To comply with WCAG 1.3.5, follow these guidelines when creating forms:

1. Identify Input Purposes: For every input field that collects personal information from the user (e.g., name, address, email, phone number, credit card details), identify its specific purpose.
2. Use the autocomplete Attribute: Apply the appropriate autocomplete attribute value to the input, select, and textarea elements.
3. Consult the Specification: Always refer to the WHATWG HTML Living Standard for the most up-to-date and complete list of autocomplete tokens.
4. Combine Tokens for Specificity: For fields that require more specific context, you can combine tokens, such as autocomplete="shipping street-address" for a shipping address street.
5. Ensure Accuracy: The chosen autocomplete token should accurately reflect the data the field expects. Misusing tokens can confuse users and break autofill functionality.

Examples

Correct Implementation

Below are examples demonstrating correct usage of the autocomplete attribute for various input fields.

<label for="email">Email Address:</label>
<input type="email" id="email" name="email" autocomplete="email">
Copy text

<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" autocomplete="name">
Copy text

<label for="shipping-street">Shipping Street Address:</label>
<input type="text" id="shipping-street" name="shipping_street" autocomplete="shipping street-address">
Copy text

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Copy text

Incorrect Implementation

These examples show common mistakes where the autocomplete attribute is either missing or incorrectly used.

<label for="email-inc">Email Address:</label>
<input type="email" id="email-inc" name="email_inc">
Copy text

<label for="city-inc">City:</label>
<input type="text" id="city-inc" name="city_inc" autocomplete="address"> 
<!-- 'address-level2' would be more specific and better -->
Copy text

<label for="zip-inc">Zip Code:</label>
<input type="text" id="zip-inc" name="zip_inc" autocomplete="zipcode"> 
<!-- 'postal-code' is the correct value -->
Copy text

Best Practices and Common Pitfalls

Best Practices

• Use Specific Tokens: Always choose the most specific autocomplete token available. For instance, use given-name and family-name instead of just name if the fields are separate.
• Consistency: Ensure that the autocomplete values are consistent across your website or application for the same type of input.
• Testing: Test forms with various browsers and and autofill features enabled to ensure correct behavior.
• Progressive Enhancement: While autocomplete is HTML-native, consider how it interacts with any client-side validation or dynamic form changes.
• Combine with aria-label or aria-describedby for Complex Fields: While not strictly required by 1.3.5, for complex fields, combining autocomplete with ARIA attributes can further enhance clarity for screen reader users.

Common Pitfalls

• Omitting autocomplete Entirely: The most common mistake is simply not including the attribute.
• Using Incorrect or Non-Standard Tokens: Typos or custom values will prevent browsers from recognizing the input purpose. Always consult the WHATWG specification.
• Over-generalizing autocomplete Values: Using a broad token like address when street-address, address-level2 (city), or postal-code are more appropriate.
• Applying autocomplete to Irrelevant Fields: Only apply autocomplete to fields where it makes sense to collect user information that corresponds to a common input purpose. For example, a search input for products doesn’t typically need autocomplete.
• Not Updating autocomplete for Dynamic Content: If form fields are added or changed dynamically via JavaScript, ensure the autocomplete attributes are also correctly set or updated.

By diligently applying the autocomplete attribute with correct values, developers can significantly enhance the accessibility and usability of web forms, making them more efficient and user-friendly for everyone.