WCAG 2.2 Guideline “1.3.5 Identify Input Purpose” Level AA

Introduction

WCAG 2.2’s “1.3.5 Identify Input Purpose” requires that each input field in forms collecting user information has a programmatically identifiable purpose. This enables assistive technologies (e.g., screen readers) to accurately understand the form’s content and communicate it effectively to users.

This article explains implementation methods and tips for beginners using HTML, CSS, and JavaScript.

1. What Does Identifying Input Purpose Mean?

Forms often include input fields for names, email addresses, phone numbers, and more. By programmatically identifying the purpose of these fields, the following benefits can be achieved:

• Screen readers can provide users with accurate information.
• Autofill features in browsers or devices (e.g., autofilling names or addresses) work correctly.

For example, by using the autocomplete attribute in input fields to specify that “this field is for entering a name,” assistive technologies and browsers can recognize its purpose.

2. Using the HTML5 autocomplete Attribute

a. Basics of the autocomplete Attribute

The autocomplete attribute specifies the purpose of input fields.

Implementation Example

A form collecting name, email, and phone number

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" autocomplete="name">

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

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

Key Points

• autocomplete="name" specifies that the field is for entering a name.
• autocomplete="email" specifies that the field is for entering an email address.

b. Commonly Used autocomplete Values

Below are frequently used values for the autocomplete attribute:

Example: Address Form

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

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

  <label for="country">Country:</label>
  <input type="text" id="country" name="country" autocomplete="country">
</form>

3. Points to Note During Implementation

a. Use Accurate autocomplete Values

Incorrect values for the autocomplete attribute can prevent proper browser interpretation.

Poor Example

<input type="text" id="name" name="name" autocomplete="fullname"> <!-- Invalid value -->

Improved Example

<input type="text" id="name" name="name" autocomplete="name">

b. Associate Labels with Input Fields

Use label elements to associate input fields with their descriptions. This ensures assistive technologies can communicate the purpose of the fields accurately.

Example

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

c. Consider Input Assistance

Setting the autocomplete attribute makes it easier for users to leverage browser input assistance features.

4. Accessibility Benefits

a. Enhanced User Experience

• Autofill features reduce input effort.
• Minimizes input errors, enabling accurate data collection.

b. Improved Support for Assistive Technologies

• Screen readers can announce the purpose of fields, making forms more accessible for visually impaired users.

5. Common Mistakes and Their Solutions

a. Forgetting to Set the autocomplete Attribute

Mistake

<input type="text" id="name" name="name">

In this example, the field’s purpose cannot be programmatically identified.

Solution

<input type="text" id="name" name="name" autocomplete="name">

b. Using Invalid autocomplete Values

Mistake

<input type="text" id="email" name="email" autocomplete="mail">

autocomplete="mail" is an invalid value.

Solution

<input type="email" id="email" name="email" autocomplete="email">

Conclusion

WCAG 2.2’s “1.3.5 Identify Input Purpose” ensures that form input fields have programmatically identifiable purposes, supporting assistive technologies and autofill features.

Key Implementation Points

1. Appropriately set the autocomplete attribute in HTML5.
2. Use label elements to clearly describe form fields.
3. Define the input field purpose accurately to provide input assistance.

Following these guidelines not only improves user input experience but also helps create accessible web forms!

We have released UUU Web Accessibility, a tool that simplifies the adoption of web accessibility. If you’re interested in improving accessibility, please check out the details!