Nom de la vue active
Toute vue interactive doit avoir un nom accessible disponible pour les technologies d'assistance telles que TalkBack et Voice Access.
Impact
Les personnes utilisant TalkBack sont les plus touchées. L'incapacité de mettre l'accent sur une vue ou d'annoncer le nom de la vue via TalkBack crée une expérience inaccessible.
La version d'Android, l'appareil et le fabricant peuvent jouer un rôle dans la détection du problème.
Confirmation
- Activer TalkBack
- Tenter de mettre le focus sur le contrôle
- L’une des situations suivantes se produira :
- Inaccessible : Impossible de mettre l'accent sur la commande.
- Inaccessible : Ciblé mais non annoncé avec TalkBack.
- Accessible : Ciblé et annoncé dans TalkBack.
Comment corriger
XML
Utilisez la propriété de texte d'un contrôle ou la description du contenu d'une vue pour garantir que TalkBack dispose d'informations précises à partager.
Button button = .......
button.setText("Button's Name");
ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");Compose
Associez les boutons d’image à une description de contenu ou à un texte pour indiquer son objectif.
@Composable
fun EmailIconButton() {
IconButton(
onClick = { … },
) {
Icon(
painter = painterResource(id = R.drawable.email_icon),
contentDescription = “Send an Email”
)
}
}Les boutons sans image doivent fournir du texte pour TalkBack.
@Composable
fun EmailButton() {
Button(
modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
onClick = { … },
) {
Text(
text = “Email”
)
}
}React Native
Pour résoudre un problème détecté par cette règle, ajoutez un [appropriate term or phrase] accessibilityLabel au composant de contrôle.
<TextInput
...
accessibilityLabel="First Name"
/>Lorsque des éléments sont regroupés dans une vue contenante, ajoutez la propriété accessible et la propriété accessibilityLabel à la vue contenante :
<View
importantForAccessibility='no-hide-descendants'
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel={"Dark Mode"}
accessibilityValue={{ text: "" + isEnabled }}
accessibilityRole='switch'
onPress={() => {
setIsEnabled(!isEnabled)
}}
>
<Switch
trackColor={{ false: 'lightgray', true: 'dimgray' }}
ios_backgroundColor={'lightgray'}
thumbColor={'white'}
onValueChange={ () => {
setIsEnabled(!isEnabled)
}}
value={isEnabled}
accessibilityElementsHidden={true}
/>
</View>