Text Field Label
This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data
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)
)
}
)
}