Nom de l'Élément Imbriqué
Assurez-vous que tout le texte visible dans un conteneur est accessible aux lecteurs d'écran
Ceci est une règle expérimentale, et par conséquent, son ou ses résultats sont considérés comme étant en phase de test bêta. En savoir plus sur règles expérimentales et comment vous pouvez contribuer à les améliorer.
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-descendantssur 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é
- Activez TalkBack
- Focalisez sur l'élément d'accessibilité contenant le texte
- 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 ?
Nom d'Élément Imbriqué a un impact critique pour les utilisateurs, et nous recommandons fortement de prendre des mesures pour remédier à ce problème. Dans de rares cas, certains textes dans un conteneur peuvent être intentionnellement décoratifs ou redondants — mais cela devrait être l'exception, et non la règle. En savoir plus sur ignorer les règles.
Ressources
Pages de Cours Deque University
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
- Documents de compréhension WCAG 2.0