Nom accessible incluant l'étiquette visible

Une vue accessible doit garantir que son nom inclut son étiquette visible.

Impact

Les personnes utilisant TalkBack et/ou souffrant de basse vision sont les plus touchées par les problèmes détectés. Des problèmes peuvent contribuer à une expérience confuse ou conflictuelle entre l’annonce de TalkBack et le contenu à l’écran.

Confirmation

1. Activer TalkBack
2. Tenter de mettre le focus sur le contrôle
3. L’une des situations suivantes se produira :
   • Inaccessible : le texte annoncé par TalkBack est différent du nom des widgets affichés.
   • Accessible : le texte annoncé par TalkBack est le même ou inclut le nom des widgets affichés.

Comment corriger

XML

Définissez une description de contenu qui correspond à ou contient le texte visible. Si le contrôle est un Button ou un TextViewcliquable :

Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");

TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");

Si le contrôle est un CheckBox, veuillez consulter Nom de la case à cocher.

Compose

Assurez-vous que les widgets contentDescription contiennent le nom de la vue.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Email”
        )
    }
}

React Native

La propriété accessibilityLabel doit correspondre ou contenir le texte visible du composant.

Par défaut, un bouton utilisera son titre comme accessibilityLabel, et passera donc cette règle.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

Pour les éléments interactifs sans titre, utilisez une vue tactile contenant les composants de contrôle et de texte. De cette manière, le composant texte devient l’étiquette visible du contrôle. Définissez l'élément de conteneur accessibilityLabel pour qu'il corresponde ou contienne le texte visible.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Dark Mode'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>