Edit Text Name

Link to Edit Text Name copied to clipboard

WCAG 2.0 - 1.3.1 A Impact - Serious

Text input elements should have an accessible name available for assistive technologies such as TalkBack and Voice Access.

Impact

Issues found by this rule impact people with blindness.

EditText or TextField elements should provide information where the Android OS expects. As a result, assistive technologies can communicate information predictably.

Confirmation

  1. Turn on TalkBack
  2. Focus on the element
  3. One of the following will happen:
    • Accessible: TalkBack announces the entered text, for, and the associated labels Text.
    • Inaccessible: TalkBack either didn't read the above information, or it was announced in the wrong order.

How to Fix

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

XML

EditText editText = .......; // Role: EditText
TextView label = .......; // Role: Label
label.setLabelFor(editText.getId()); // Associate the Checkbox with its Name

Compose

@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)
            )
        }
    )
}