accessibility-guidelines

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

Purpose of text fields

On this page:

Summary
Requirements
Guidance for Design
Guidance for iOS
Guidance for Android
Guidance for Flutter
Guidance for Web
More info

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.

Requirements

Requirements for both native and web

This section needs more content. Contribute via Github or email.

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.

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 Design

This section needs more content. Contribute via Github or email.

Guidance 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

More guidance for iOS

UITextInputTraits.textContentType developer reference

Guidance 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" 
    ... />

More guidance for Android

Guidance 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

// 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(),
)

More guidance for Flutter

A quick introduction of the Semantics() widget by Didier Boelens

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" />