Input screen

Explicitly label input fields #

Target: everyone and in particular the visually impaired.
When: during design and development.

Description:

Linking input fields with their labels provides additional vocalisation that makes the field easier for the user to understand.

There are 2 techniques to achieve this:

  • labelFor  : indicate that a label is linked to another view. This method takes as parameter the id of the view that we label. You can use this method with almost any type of input field. It can be used from the XML android:labelFor or the setLabelFor method.
  • hint : add an example text when the text field is empty. This method only works for EditText. It takes in parameter the id of a string. Usable from the android:hint XML or the setHint method.

It is essential to indicate to the user, for a good understanding of the input screen, the required fields, the expected format, or errors made on fields.

To be verified:

  • Input fields must be linked to a label if it is visible, otherwise a hint is present.
  • Required fields are identifiable
  • The format expected for "complex" fields is indicated to the user

Example

<EditText
   android:id="@+id/addressLine2"
   android:hint="@string/aptSuiteBuilding" ... />

<TextView
   android:id="@+id/usernameLabel" ...
   android:text="@string/username"
   android:labelFor="@+id/usernameEntry" />

<EditText
   android:id="@+id/usernameEntry" ... />

Reference WCAG: