Nom du champ de texte modifiable
Not for use with personal data
Les éléments de saisie de texte doivent avoir un nom accessible disponible pour les technologies d'assistance telles que TalkBack et Voice Access.
Impact
Les problèmes détectés par cette règle affectent les personnes aveugles.
EditText
ou TextField
éléments doivent fournir des informations là où le système d'exploitation Android l'attend. Par conséquent, les technologies d’assistance peuvent communiquer des informations de manière prévisible.
Confirmation
- Activer TalkBack
- Focalisez-vous sur l'élément
- L’une des situations suivantes se produira :
- Accessible : TalkBack annonce le texte saisi et les étiquettes associées
Text
. - Inaccessible : TalkBack n'a pas lu les informations ci-dessus, ou elles ont été annoncées dans le mauvais ordre.
- Accessible : TalkBack annonce le texte saisi et les étiquettes associées
Comment corriger
Ajoutez des étiquettes appropriées au champ de texte. Utilisez des icônes uniquement lorsqu'une description de contenu est disponible.
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)
)
}
)
}
React Native
Associez l'élément de texte à son champ de texte correspondant en utilisant la propriété aria-labelledBy
:
<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'
/>