Text Field Label

Link to Text Field Label copied to clipboard

WCAG 2.0 - 1.3.1 A Impact - Serious

Ensures TextFields provide unique content descriptions and context about requested information to people using assistive technology.

Supported within:
Compose Layouts

Impact

Issues found by this rule impact people with blindness.

The impact may include:

  • Unclear purpose of the view (including a missing name)
  • Unable to focus the view with TalkBack
  • Contradictory information provided

Confirmation

  1. Turn on TalkBack
  2. Focus on the text field
  3. One of the following will happen:
    • Inaccessible: Unable to focus on the field.
    • Inaccessible: Only reads out as EditText.
    • Inconclusive: Announced by TalkBack with the custom content description. Please ensure the content description provides clear information.
    • Accessible: Focused and announced in TalkBack with the associated label(s).

How to Fix

Add proper labels to the text field. Use icons only when a content description is available.

@Composable
private fun LabeledTextField(modifier: Modifier = Modifier) {
    val textInput = remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier,
        value = textInput.value,
        onValueChange = { textInput.value = it },
        visualTransformation = VisualTransformation.None,
        label = { Text(stringResource(R.string.address_label)) }
    )
}

@Composable
private fun IconsWithDescriptionTextField(modifier: Modifier = Modifier) {
    val textInput = remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier,
        value = textInput.value,
        onValueChange = { textInput.value = it },
        label = {
            Icon(
                painter = painterResource(id = R.drawable.ic_location),
                contentDescription = stringResource(id = R.string.address_content_description)
            )
        }
    )
}