Contrôle Actif Imbriqué

Découvrez comment nous utilisons l'intelligence artificielle pour cette règle !

Ce que Nous Vérifions

Un élément d'accessibilité ne doit pas comporter plusieurs contrôles actifs imbriqués. TalkBack ne peut pas activer plus d'un contrôle dans un seul élément d'accessibilité, l'utilisateur doit donc pouvoir se concentrer et interagir individuellement avec chaque contrôle actif.

Exemple Non Conforme ❌

TalkBack focuses each entire card as a single unit

Les boutons « Ajouter au Panier », liste de souhaits et partager imbriqués à l'intérieur de chaque carte sont inaccessibles

Les utilisateurs de TalkBack ne peuvent pas activer les contrôles individuels dans la carte

Exemple Conforme ✅

Chaque contrôle dans une carte est individually focusable par TalkBack

TalkBack navigue vers l'image, le nom du produit, le bouton « Ajouter au Panier », la liste de souhaits et le bouton partager en tant qu'éléments séparés

Les utilisateurs peuvent activer chaque action indépendamment

En Bref

• Cette règle a un impact critique pour les utilisateurs
• Un élément d'accessibilité ne doit pas contenir plusieurs contrôles interactifs qui sont individuellement cliquables mais cachés pour les technologies d'assistance
• TalkBack ne peut activer qu'une seule action par élément focalisé - si plusieurs contrôles sont imbriqués et cachés, les utilisateurs ne peuvent pas les atteindre indépendamment

Impact sur les Utilisateurs

Les personnes utilisant TalkBack sont les plus impactées. Lorsque plusieurs contrôles actifs sont imbriqués dans un seul élément d'accessibilité, TalkBack ne peut en activer qu'un seul ou peut activer le mauvais. Cela signifie que les utilisateurs peuvent déclencher une action non intentionnelle, ne recevoir aucune réponse, ou être complètement incapables d'accéder à certains contrôles.

Confirmer le Problème de Contrôle Actif Imbriqué

1. Activez TalkBack
2. Essayez de vous concentrer sur le contrôle
3. Essayez d'activer le contrôle
4. L'un des éléments suivants se produira :
   • Inaccessible : Rien ne se passe
   • Inaccessible : Le contrôle est activé, mais sa boîte de mise au point contient un autre contrôle
   • Inaccessible : Un autre contrôle est activé
   • Accessible : Le contrôle est activé et est le seul contrôle dans sa boîte de mise au point

Corriger les Problèmes

Évitez les éléments cliquables imbriqués. Assurez-vous que chaque élément cliquable est individuellement focalisable par la technologie d'assistance. Si un élément parent doit gérer une action globale, les contrôles enfants doivent être cachés pour la technologie d'assistance afin que les utilisateurs ne soient pas confrontés à des interactions conflictuelles ou inaccessibles.

XML

Do not set the importantForAccessibility property to "no" on clickable elements nested inside a layout. If child controls should not be individually accessible, ensure the parent handles the action and is the only focusable element.

Compose

Évitez le modèle ci-dessous, où un parent cliquable contient des enfants cachés avec invisibleToUser() — les utilisateurs de TalkBack ne pourront pas atteindre les contrôles enfants cachés :

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

Si les enfants ont des actions individuelles, assurez-vous que le parent n'est pas également cliquable. L'exemple conforme ci-dessous montre chaque enfant comme individuellement cliquable, avec un parent non cliquable :

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

React Native

Si un contrôle enfant ne doit pas être focalisé individuellement, assurez-vous que l'élément parent est accessible et gère l'action. Définissez importantForAccessibility='no-hide-descendants' sur l'enfant pour qu'il soit caché pour les technologies d'assistance :

<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>

Puis-je Ignorer Cette Règle ?

Le Contrôle Actif Imbriqué a un impact critique pour les utilisateurs, et nous recommandons fortement de corriger ces problèmes. Parce qu'il s'agit d'une règle expérimentale, vous devriez vérifier les résultats manuellement. Si vous avez confirmé que tous les contrôles actifs de l'élément sont individuellement atteignables et activables par TalkBack, il peut être acceptable d'ignorer cette constatation. En savoir plus sur ignorer les règles.

Ressources

Pages de Cours de Deque University

• 2.1.1 Clavier (A)

Remarque : L'accès complet aux ressources de Deque University nécessite un abonnement.

Autres Ressources

• Directives pour l'Accessibilité du Contenu Web (WCAG) 2.1, Recommandation du W3C
  • Critère de succès 2.1.1 - Clavier
• Comprendre les documents WCAG 2.1
  • Comprendre 2.1.1 A - Clavier