Understanding WCAG SC 1.3.5 Identify Input Purpose
Version and Level: 2.1/2.2 (Level AA)

Success Criterion 1.3.5 Identify Input Purpose requires that the purpose of each input field collecting information about the user can be programmatically determined. This ensures that users with cognitive and motor disabilities can easily fill out forms by utilizing autocomplete features and personalized values.

If a form relies solely on the ‘placeholder' attribute and disappears as soon as the field is filled, users with short-term memory issues may forget the purpose of the field. Adding an auto-complete feature can assist users by utilizing information stored in their browser to automatically fill out the form.

Benefits:

  1. Ease of Use for Cognitive Disabilities: Simplifies the process of filling out forms by automatically populating personal data fields, reducing cognitive load.
  2. Support for Motor Disabilities: Minimizes the physical effort required to enter data, making forms more accessible to users with motor impairments.

Main Objective:

To ensure that input fields collecting user information have a programmatically determinable purpose, enhancing accessibility for users with cognitive and motor disabilities.

Best Practices:

  • Use appropriate autocomplete token values: Use appropriate token values with the HTML autocomplete attribute.

  • Avoid using autocomplete for non-user data fields: Avoid using autocomplete on fields that do not collect user data such as search bars or fields used solely for navigation purposes.

Examples & Explanation:

Example: A contact form auto-fills fields for name, street, post code, city, telephone number, and email address using values stored in the user's browser.

What Should Be Avoided

HTML/CSS

              <form>
                <label for="fname">First Name:</label>
                <input type="text" id="fname" name="fname">
                
                <label for="lname">Last Name:</label>
                <input type="text" id="lname" name="lname">
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email">
                
                <label for="address">Address:</label>
                <input type="text" id="address" name="address">
                
                <label for="city">City:</label>
                <input type="text" id="city" name="city">
                
                <label for="postal">Postal Code:</label>
                <input type="text" id="postal" name="postal">
                
                <label for="phone">Phone Number:</label>
                <input type="tel" id="phone" name="phone">
              </form>

Explanation:Without the autocomplete attribute, the browser cannot assist in filling out the form, making it harder for users with cognitive or motor disabilities to complete the form.

What Should Be Done

HTML/CSS

              <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">
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" autocomplete="email">
                
                <label for="address">Address:</label>
                <input type="text" id="address" name="address" autocomplete="street-address">
                
                <label for="city">City:</label>
                <input type="text" id="city" name="city" autocomplete="address-level2">
                
                <label for="postal">Postal Code:</label>
                <input type="text" id="postal" name="postal" autocomplete="postal-code">
                
                <label for="phone">Phone Number:</label>
                <input type="tel" id="phone" name="phone" autocomplete="tel">
              </form>

Explanation:The autocomplete attribute helps browsers to store and auto-fill personal data, making it easier for users with cognitive and motor disabilities to complete the form.

Next Up

Expand your knowledge with SC 1.4.1 - Use of Color. Learn to make your content accessible for all users.

Go to SC 1.4.1