Android develop - 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.
  • TextInputLayout: allows to link directly the text field with its label within the same layout, which will have the effect to vocalize correctly the field while making it prettier.

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



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

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

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/addressLine"
   android:hint="@string/adress" ... >

<com.google.android.material.textfield.TextInputEditText
   ... />

</com.google.android.material.textfield.TextInputLayout>


// With Jetpack Compose
var username by remember { mutableStateOf("") }
TextField(
        value = username,
        onValueChange = { username = it },
	label = { Text("Field") }
    )

Reference WCAG: