1.3.5 Identify Input Purpose (AA)
Understanding 1.3.5 Identify Input Purpose (AA)
In an text input form the purpose of each input field that collects information about the user can be understood by Assistive Technologies and browsers, when: The input field serves a purpose that relates to the user of the content. The content is created using HTML or supported by a language which can identify the expected meaning.
Why is this a problem?
- People with language and memory problems or disabilities benefit from the browser auto-filling their information.
- People with motor impairments also benefit from not having to fill in forms with the same information when the browser can do it for them.
Requirements / What to do?
- A form may be written in a way where its purpose or the purpose of some of the components is not clear. This can be passed by using the
HTML 5.2 autocomplete attributes, on fields that collect information about the user.
NOTE: Remember that you only need to add Autocomplete attributes 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).
Useful resources
- Find out how to use the HTML 5.2 autocomplete attributes.
- An example of a form using autocomplete - (Thanks to John Foliot)
NOTE: If you view the example form using the browser inspection tools or ‘View Source’ you will see the autocomplete attributes added to the various form inputs that relate to the user.
<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">
Example of a form collecting data on a user with autofill examples.