Nom de l'Élément Imbriqué

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

Ce Que Nous Vérifions

Un élément pouvant être focalisé doit avoir tout le texte visible dans son nom accessible disponible pour les technologies d'assistance telles que TalkBack et Voice Access.

Exemple de Non-Conformité ❌

La carte est focalisable, mais les éléments texte enfants sont hidden from assistive technology

TalkBack annonce seulement "Group" - aucun du texte visible (titre, auteurs, date, etc.) n'est lu à voix haute

Les utilisateurs de lecteurs d'écran n'ont pas accès au contenu que les utilisateurs voyants peuvent lire

Exemple de Conformité ✅

Tout le texte visible dans la carte est available to assistive technology

TalkBack annonce le contenu complet : titre, auteurs, date de publication, nombre de pages, format, et ISBN

Les utilisateurs de lecteurs d'écran reçoivent la même information que les utilisateurs voyants

En Résumé

• Cette règle a un impact critique pour les utilisateurs
• Tout le texte visible à l'intérieur d'un conteneur focalisable doit être accessible à TalkBack et Voice Access
• Évitez de définir importantForAccessibility="no" sur des éléments texte que les utilisateurs voyants peuvent percevoir
• Dans Compose, évitez d'utiliser invisibleToUser() sur des éléments Text visibles à l'écran
• Dans React Native, évitez de paramétrer importantForAccessibility à no-hide-descendants sur du texte visible

Impact sur les Utilisateurs

Les personnes utilisant TalkBack sont les plus impactées par les problèmes de Nom d'Élément Imbriqué. Lors de l'agrégation de plusieurs éléments dans un conteneur, TalkBack peut ne pas lire tout le texte à l'intérieur du conteneur - surtout si les éléments texte individuels sont masqués pour la technologie d'assistance. Cela signifie que les personnes s'appuyant sur TalkBack peuvent ignorer un contenu important à l'écran qui est disponible pour les utilisateurs voyants.

Confirmer le Problème de Nom d'Élément Imbriqué

1. Activez TalkBack
2. Focalisez sur l'élément d'accessibilité contenant le texte
3. L'un des résultats suivants se produira :
   • Inaccessible : TalkBack ne lira pas tout le texte visible dans la zone de focalisation
   • Accessible : TalkBack lira tout le texte contenu dans la zone de focalisation

Corriger les Problèmes

Pour résoudre les problèmes de Nom d'Élément Imbriqué, assurez-vous que tout le texte visible à l'intérieur d'un conteneur focalisable est disponible pour la technologie d'assistance. Évitez de masquer explicitement les éléments texte à TalkBack ou Voice Access lorsqu'ils contiennent du contenu perçu par les utilisateurs voyants.

XML

Évitez de définir la propriété importantForAccessibility sur les vues texte à no. Tous les utilisateurs devraient avoir le même accès au texte à l'écran, qu'ils utilisent ou non une technologie d'assistance.

Compose

Évitez de marquer les éléments Compose Text comme invisibleToUser. Tous les utilisateurs devraient avoir le même accès au texte à l'écran, qu'ils utilisent ou non une technologie d'assistance.

Dans l'exemple ci-dessous, supprimez invisibleToUser pour s'assurer que les vues sont accessibles aux personnes utilisant une technologie d'assistance.

Row {
    Text("Welcome to Deque")
    Text("I am a text element.", modifier = Modifier.semantics {
        // Omit the API below to make your Text elements accessible
        invisibleToUser()
    })
}

React Native

Un problème détecté par cette règle dans les applications construites avec React Native indique une mauvaise utilisation de la propriété importantForAccessibility. Si vous utilisez cette propriété, assurez-vous qu'elle n'est PAS définie à no-hide-descendants.

Flutter

Lorsqu'un conteneur regroupe plusieurs morceaux de texte, assurez-vous que tout le texte visible est exposé au lecteur d'écran. Utilisez MergeSemantics pour combiner les nœuds textes enfants en un seul nom accessible.

// Failing — ExcludeSemantics hides visible text from the screen reader
Semantics(
  label: 'Item name: Widget',
  child: Column(
    children: [
      const Text('Item name: Widget'),
      ExcludeSemantics(child: const Text('Price: \$9.99')),
      ExcludeSemantics(child: const Text('In stock')),
    ],
  ),
)

// Passing — MergeSemantics combines all child text into one node
// Screen reader announces "Item name: Widget, Price: $9.99, In stock"
MergeSemantics(
  child: Column(
    children: [
      const Text('Item name: Widget'),
      const Text('Price: \$9.99'),
      const Text('In stock'),
    ],
  ),
)

Puis-je Ignorer Cette Règle ?

Cette règle a été désactivée avec la version 9.1.0 du SDK Android, et cette question est maintenant sans objet.

Ressources

Pages de Cours Deque University

• Critère de Succès 1.3.2 - Séquence Significative (A)

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

Autres Ressources

• Règles pour l'accessibilité des contenus Web (WCAG) 2.0, Recommandation du W3C
  • Critère de succès 1.3.2 - Séquence significative
• Documents de compréhension WCAG 2.0
  • Comprendre 1.3.2 A - Séquence significative