accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email.

Purpose of text fields

Does a text input field collect information about the user?
→ Use the HTML `autocomplete` attribute to identify its purpose. For example: email, password, given-name, …

When an input field collects information about to the user (for example, if the input field is collecting the user’s name, as opposed to the name of one of their friends), then its purpose needs to be identified in code in ways that can be understood by Assistive Technologies and browsers.

For example, if an HTML input field collects the user’s first name, adding the autocomplete="given-name" attribute lets the browser and screen readers know what the purpose of the input field is.

Note that if the input field was not collecting information about the user themselves (but about one of their friends, for example), it should not have this attribute.

On this page:

Requirements
Guidance for Web
More info

Requirements

Using the HTML 5.2 autocomplete attribute on input fields that collect information about the user.

Note: Remember that you should only add the autocomplete attribute to inputs that collect information about the user.

Why?

People with language and memory problems or disabilities benefit from the system auto-filling their information.
People with motor impairments also benefit from not having to fill in forms with the same information when the system can do it for them.

Official wording in the Web Content Accessibility Guidelines

1.3.5 Identify Input Purpose: The purpose of each input field collecting information about the user can be programmatically determined when: (Level AA)

The input field serves a purpose identified 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.

See the W3C’s detailed explanation of this guideline with techniques and examples.

Guidance for Web

Collecting data about a user using `input` fields the `autocomplete` attribute:

Here’s an example of a form collecting data on a user with autocomplete attributes:

<h2>Personal Information</h2>
<label for="1">Name</label>
<input type="text" name="1" id="1" autocomplete="name" />
<label for="2">Honorific / Prefix</label>
<input type="text" name="2" id="2" autocomplete="honorific-prefix" />
<label for="3">Given Name</label>
<input type="text" name="3" id="3" autocomplete="given-name" />
<label for="4">Additional Name</label>
<input type="text" name="4" id="4" autocomplete="additional-name" />
<label for="5">Family name</label>
<input type="text" name="5" id="5" autocomplete="family-name" />
<label for="6">Honorific Suffix</label>
<input type="text" name="6" id="6" autocomplete="honorific-suffix" />

Note: Remember that you should only add the autocomplete attribute to inputs that collect information about the user.

Common mistakes

Building a form that collects information about the user without the autocomplete (or other semantic that identifies the purpose of the input).
Putting the autocomplete attribute on input fields that collect information that is not about the user themselves (for example, if the input field is for collecting information about a friend of the user)

More guidance for Web

Find out how to use the HTML 5.2 autocomplete attributes
An example of a form using autocomplete by John Foliot

More info

Sources

Contribute