WCAG – 1.3.5 Identify Input Purpose (Level AA)

1.3.5 Identify Input Purpose (AA): 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
  • The content is implemented using technologies with support for identifying the expected meaning for form input data.

Requirements

Web only 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.

Benefitted Disability Types

  • 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.

Summary

If a text input field collects information about the user, identify its specific purpose in code (for example email, password or 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.

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)

Design Guide

Identify Input Purpose Example for IOS

Setting specific content types on labels, which will automatically present options that iOS knows about to the user:

prefixLabel.textContentType = .namePrefix
firstNameLabel.textContentType = .givenName
surnameLabel.textContentType = .familyName
suffixLabel.textContentType = .nameSuffix
phoneNumberLabel.textContentType = .telephoneNumber
creditCardNumber.textContentType = .creditCardNumber

Identify Input Purpose Example for Android

For EditTexts and TextViews use a combination of hint (user-faced description) and inputText (setting the specific content type on the field):

<EditText
    android:hint="Phone Number"
    android:inputType="phone"

Some of the most common InputTypes include:

  • number
  • phone
  • text, textCapWords, textMultiLine
  • textPersonName
  • textPostalAddress
  • textEmailAddress
  • textPassword, textVisiblePassword

InputType admits different combination of values. For example, if you wanted a Postal Address all capitalised, you could use: textPostalAddress|textCapCharacters

For ImageView, ImageButton, Check Box or other Views use:

android:contentDescription="label"

If a View needs to be a label for another View use labelFor:

<TextView
    android:id="@+id/some_label"
    android:labelFor="@id/my_other_view" 
    ... />

Identify Input Purpose Example for Flutter

Flutter deals with assistive technologies like screen readers using the Semantics() widget.

For widgets Icon() and Text() you can use

semanticLabel:'label'

For Image.asset() you can use both

semanticLabel:'label'



excludeFromSemantics:bool

For TextFields() the InputDecoration() will handle the semantics

TextField( decoration: InputDecoration( hintText: 'Testing hint', labelText: labelText.toUpperCase(), ), ) 

For widgets that need semantics but do not have them or for greater control of widget semantics you can use




Semantics( //The `Semantics()` widget has many properties not all are listed here
    lable:'label',
    excludeSemantics: bool, 
    child: MyWidget()
)


ExcludeSemantics(
    excluding: bool, 
    child: MyWidget(),
)


MergeSemantics(child: MyWidget())


BlockSemantics(
    blocking:bool, 
    child: MyWidget(),
)

Identify Input Purpose Example 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.

References

  1. UITextInputTraits.textContentType developer reference
  2. EditText.labelFor() developer reference
  3. TextView.InputTypes developer reference
  4. A quick introduction of the Semantics() widget by Didier Boelens
  5. Find out how to use the HTML 5.2 autocomplete attributes
  6. An example of a form using autocomplete by John Foliot
  7. Accessibility Guidelines- Github.io

Leave a Comment

Your email address will not be published. Required fields are marked *