Contrôle actif imbriqué

Un élément d’accessibilité ne doit pas comporter plusieurs contrôles actifs intégrés. Chaque contrôle actif doit être ciblé et utilisé individuellement.

Impact

Les personnes utilisant TalkBack sont les plus touchées. TalkBack ne peut pas activer plus d’un contrôle actif dans un autre élément d’accessibilité.

Confirmation

1. Activer TalkBack
2. Tenter de mettre le focus sur le contrôle
3. Tenter d'activer le contrôle
4. L’une des situations suivantes se produira :
   • Inaccessible : Un contrôle actif différent est activé.
   • Inaccessible : Le contrôle actif est activé, mais sa boîte de focus contient un autre contrôle actif.
   • Inaccessible : Rien ne se passe.
   • Accessible : Le contrôle est activé et est le seul contrôle dans sa zone de focus.

Comment corriger

Évitez les éléments cliquables imbriqués. Assurez-vous que chaque élément cliquable est accessible grâce à la technologie d'accessibilité. Les vues accessibles sans technologie d’assistance devraient être accessibles à toute personne utilisant une technologie d’assistance.

XML

Évitez de définir la propriété importantForAccessibility à no sur toutes les vues cliquables imbriquées dans une mise en page.

Compose

Dans l'exemple ci-dessous, supprimez invisibleToUser pour garantir que les vues sont disponibles pour toute personne utilisant une technologie d'assistance. Notez que le parent est cliquable et peut entraîner un comportement indésirable plutôt qu'interagir directement avec les vues 'Paramètres' ou 'Informations'.

Row(modifier = Modifier.clickable { ... }) {
    Text("Settings", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
    Text("Information", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
}

Un exemple concret serait que toutes les vues soient visibles pour l'intégration avec la technologie d'assistance avec un parent qui n'est pas cliquable :

Row {
    Text("Settings", 
        modifier = Modifier.clickable { ... })
    Text("Information", 
        modifier = Modifier.clickable { ... })
}

React Native

Un contrôle intégré dans un autre contrôle ne doit pas pouvoir être interagissable ou focalisé. Le contrôle parent doit être focalisable et cliquable. Pour y parvenir, assurez-vous que l’élément parent est accessible et dispose d’une action de clic. Le composant enfant doit être défini à importantForAccessibility . no-hide-descendants

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => props.navigation.navigate('FocusableTextExample')}
   accessible={true}
   accessibilityLabel={"Purchase items in your shopping cart"}>
     <Button title="Buy"
       importantForAccessibility='no-hide-descendants'
       accessibilityElementsHidden='true'
       adjustsFontSizeToFit={true}
       marginBottom={20}
       titleStyle={{
         color: "white",
         fontSize: 20,
        }}
        buttonStyle={{
          height: 50,
          width: 200
        }}
     />
</TouchableOpacity>