Text Field Label
Link to Text Field Label copied to clipboard
Ensures TextFields provide unique content descriptions and context about requested information to people using assistive technology.
Supported within:
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
- Turn on TalkBack
- Focus on the text field
- 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)
)
}
)
}