WCAG 1.3.5: Identify Input Purpose

Back to all WCAG criteria

OVERVIEW

Effort:

  • Complexity:Easy
  • Duration:Fast

Important for:

Development

What's it about?

Form fields must be marked up in the code so that the browser and assistive technologies can understand their purpose. This allows the browser to offer appropriate autocomplete suggestions.

This applies only to form fields that relate to the active user and request personal data, such as name, address, or email.

Illustration of a personal data form showing two input fields, one for name and one for credit card number. Below each field is the corresponding autocomplete attribute with the correct value for that field.

How to

Depending on your situation, you can implement one of the following options to meet the criterion. For a deeper dive, please refer to the linked WCAG techniques.

  • Use the autocomplete attribute

    When users need to enter personal data (name, address, password), the form fields in the HTML code need to have an autocomplete attribute with the correct values.

    Example for the name: autocomplete="given-name"

    Technique(s):

    llustration of a form displaying two input fields: one for "Name" and one for "Email Address." Below each input field, the autocomplete attribute is shown with the correct value for each field: autocomplete="given-name" for Name and autocomplete="email" for Email Address.

    Notes

    • Exception: It's not clear who enters the data

      This requirement applies only to fields that relate to the user themselves. It does not apply to pages where personal data for multiple people can be entered, making it impossible to distinguish between the entering user and other people.

      Example: airline booking pages. The input fields for the user are not distinguishable from those for fellow passengers. In such cases, it is not possible to apply the autocomplete correctly because the purpose of the fields is not clearly identifiable.

      Illustration of a form with multiple fields for entering data for different people. Each section of the form allows the user to input personal details for a different individual, such as name and address

          Accessible development?

          Our workshop for developers!

          Learn everything you need to know in our workshop to build accessible websites!

          More about the workshop

          Learn accessibility with us?

          Looking to implement WCAG best practices in your design, development, or content workflow? Book a workshop for your team or contact us directly to learn more.

          Send us an email!