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'

//and

excludeFromSemantics:bool

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

TextField(
    decoration: InputDecoration(
        hintText: 'Testing hint', // this has its own semantics
        labelText: labelText.toUpperCase(), // this has its own semantics
    ),
)
// You can achieve more control using the different semantics widgets shown below

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

// Note that all the properties of these widgets are optional

// This widget will add semantics properties to its child though some of them might be overwritten if the child widget has its own semantic properties
Semantics( //The `Semantics()` widget has many properties not all are listed here
    lable:'label',
    excludeSemantics: bool, // false by default
    child: MyWidget()
)

// This will exclude the semantics of its child based on the bool value of `excluding:` which is true by default
ExcludeSemantics(
    excluding: bool, // true by default
    child: MyWidget(),
)

// This will merge all of the semantics of its child and its children all the way down the widget tree
MergeSemantics(child: MyWidget())

// This will block any semantics of a widget drawn below it e.g an alert should usually block interaction with any widget located "behind" the alert (even when they are still partially visible)
BlockSemantics(
    blocking:bool, // true by default
    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