Labelling form controls

Must

All form controls must be labelled.

Description

Labels help all users to understand what a form control is and what is being asked for. And they are essential for users who cannot easily determine this by looking at the form and surrounding content.

All form controls, such as text inputs, check boxes, select lists, or buttons, must each have a unique label. The label can be either a default value of the control, such as a submit button, or a correctly associated property or element, such as a label. While placeholders may provide additional hints, they are temporary and must not substitute a label. Labels must be visible and available to assistive technology.

IOS

Key recommendations are:

  • Provide visual labels;
  • Use the accessibilityLabel property to name the form control;
  • Use the appropriate accessibilityTraits property to describe the type;
  • Use the accessibilityHint property when the form control needs instructions or explanation for screen reader users.

iOS example

[FNLabel setText:NSLocalizedString(@"First Name", nil)];
[FNField setAccessibilityLabel:FNLabel.accessibilityLabel];                        
[FNLabel setText:NSLocalizedString(@"First Name", nil)];                        

ANDROID

Use editText to provide explicit labels for fields.

Android example

On-screen text followed by a text input, the text input has an accessible label:

<TextView android:id="@+id/password_label" android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Password"></TextView>
<EditText android:id="@+id/password" android:inputType="textPassword" android:hint="Password" android:layout_height="wrap_content" android:layout_width="wrap_content"></EditText>                        

On-screen text followed by a text input, the text input does not have an accessible label or uses contentDescription.

                        

HTML

Key recommendations are:

  • Use explicitly associated labels;
  • Use title attributes when visual labels are not possible;
  • Do not solely rely on ARIA labels;
  • Do not solely rely on HTML 5 attributes like title="".

HTML example

<label for="uname">Username:</label>
<input type="text" id="uname" />                        
<div>Username: 
<input type="text" id="uname" /></div>                        

TESTING

 

Procedures
  • Activate a screen reader.
  • Locate form fields.
  • Verify that all form fields have a visual label.
  • Verify that all form field labels are announced by a screen reader upon navigation to the form field. Use tab or screen reader "next" control to navigate.
Results

Both check are true:

  • Visual labels are present for all form fields;
  • A screen reader announces all form field labels.