Texte focalisable

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

Ce que nous vérifions

Tous les éléments contenant du texte doivent être focalisables pour les technologies d'assistance telles que TalkBack. Les éléments textuels ne doivent pas être masqués aux technologies d'assistance, afin que les utilisateurs puissent naviguer et lire le texte à l'écran.

Exemple d'échec ❌

Le price and description text are hidden from assistive technology

TalkBack passe de « Casque Premium » directement à « Ajouter au panier » — le prix et la description ne sont jamais annoncés

Les utilisateurs de lecteurs d'écran manquent des informations cruciales sur le produit affiché à l'écran

Exemple réussi ✅

Tous les éléments textuels sont available to assistive technology et atteignables par TalkBack

TalkBack navigue à travers les quatre éléments dans l'ordre : titre, prix, description et bouton

Les utilisateurs de lecteurs d'écran reçoivent toutes les informations sur le produit dans un ordre de lecture logique

En bref

• Cette règle a un impact crucial pour les utilisateurs
• Les éléments textuels ne doivent pas être masqués aux technologies d'assistance pour que TalkBack puisse les lire
• En XML, ne pas définir importantForAccessibility="no" sur les éléments textuels
• Dans Compose, ne marquez pas les éléments textuels comme invisibleToUser()
• Dans React Native, les éléments textuels sont accessibles par défaut ; donc ne les masquez pas aux technologies d'assistance

Impact sur les utilisateurs

Les personnes aveugles ou malvoyantes sont les plus impactées. Lorsqu’un élément textuel est masqué à l’accessibilité, TalkBack ne peut pas s’y focaliser. En conséquence, les utilisateurs de lecteurs d'écran manqueront complètement les informations affichées à l'écran, ce qui peut entraîner de la confusion ou empêcher l'accès à un contenu important.

Confirmer le problème de texte focalisable

1. Activez TalkBack
2. Essayez de vous focaliser sur l'élément textuel
3. L'un des cas suivants se produira :
   • Inaccessible : L'élément textuel ne sera pas focalisable par TalkBack
   • Accessible : L'élément textuel est focalisé et lu par TalkBack

Corriger les problèmes

Pour résoudre un problème de texte focalisable, assurez-vous que l'élément textuel n'est pas explicitement masqué aux technologies d'assistance. Si le texte fait partie d'un élément parent focalisable (tel qu'un bouton ou un contrôle étiqueté), le nom accessible du parent doit inclure le texte. Dans ce cas, l'élément textuel lui-même n'a pas besoin d'être individuellement focalisable.

XML

Ne pas définir la propriété importantForAccessibility sur "no" pour les éléments textuels. Si cet attribut est présent, supprimez-le ou définissez-le sur "yes" ou "auto".

Compose

Ne marquez pas les éléments textuels de Compose comme invisibleToUser(). Retirez ce modificateur pour garantir que l'élément soit accessible à TalkBack.

Text("Digital equality for all.", modifier = Modifier.semantics {
    // Remove invisibleToUser() to make this element accessible to TalkBack
    invisibleToUser()
})

React Native

Dans React Native, les éléments textuels sont accessibles par défaut. Confirmez que le texte est significatif et fournit du contexte. Ne désactivez pas l'accessibilité en utilisant la propriété accessible={false} directement sur l'élément texte, ou la propriété importantForAccessibility='no-hide-descendants' sur un élément parent.

Flutter

Dans Flutter, les éléments Text sont inclus par défaut dans l'arbre d'accessibilité. Confirmez que le texte est significatif et fournit du contexte. N'excluez pas le texte visible de l'arbre d'accessibilité en l'enveloppant dans ExcludeSemantics ou Semantics(excludeSemantics: true).

Puis-je ignorer cette règle ?

Le texte focalisable a un impact crucial pour les utilisateurs, et nous recommandons fortement de corriger ces problèmes. Dans les cas où le texte est contenu dans un élément parent déjà focalisable par TalkBack et incluant déjà le texte dans son nom accessible - comme une étiquette de bouton ou le texte descriptif d'un contrôle - il peut être acceptable de laisser l'élément textuel lui-même non focalisable. En savoir plus sur ignorer les règles.

Ressources

Pages de cours Deque University

• 1.3.2 Séquence significative (A)

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

Autres ressources

• Directives pour l'accessibilité du contenu Web (WCAG) 2.0, recommandation du W3C
  • Critère de réussite 1.3.2 - Séquence significative
• Docs de compréhension WCAG 2.0
  • Comprendre 1.3.2 A - Séquence signifiative