Edit Text Name
Link to Edit Text Name copied to clipboard
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
- Turn on TalkBack
- Focus on the element
- 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.
- Accessible: TalkBack announces the entered text, for, and the associated labels
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 NameCompose
@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)
)
}
)
}React Native
Associate the text element with its corresponding text field by using the aria-labelledBy property:
<Text
style={{height: 70, width: 150, fontSize: 20, marginTop: 10}}
aria-label="Username"
nativeID="labelUsername">
Username
</Text>
<TextInput
style={{height: 50, width: 200, backgroundColor: 'azure', fontSize: 20}}
aria-label="input"
aria-labelledby="labelUsername"
placeholder='John'
/>