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 VoiceOver. Les éléments textuels doivent être marqués comme éléments d'accessibilité, afin que les utilisateurs de VoiceOver puissent naviguer et lire le texte à l'écran.

Exemple d'erreur ❌

Le price and description text are not marked as accessibility elements

VoiceOver passe de « Écouteurs 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 d'application ✅

Tous les éléments textuels sont marked as accessibility elements et accessibles par VoiceOver

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

Les utilisateurs de lecteurs d'écran reçoivent l'information complète sur le produit dans un ordre de lecture logique

En bref

• Cette règle a un impact critique pour les utilisateurs
• Les éléments textuels doivent être marqués comme éléments d'accessibilité pour que VoiceOver puisse les lire
• Dans UIKit, définissez isAccessibilityElement = true sur l'élément textuel pour le rendre focalisable
• Dans SwiftUI et React Native, les éléments textuels sont accessibles par défaut — ne les cachez pas aux technologies d'assistance

Impact sur les utilisateurs

Les personnes aveugles ou malvoyantes sont les plus touchées. Lorsqu'un élément textuel n'est pas marqué comme élément d'accessibilité, VoiceOver ne peut pas se concentrer dessus. En conséquence, les utilisateurs de lecteurs d'écran manqueront complètement les informations affichées à l'écran, ce qui peut entraîner une confusion ou empêcher l'accès à un contenu important.

Confirmer le problème de texte focalisable

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

Résoudre les problèmes

Pour résoudre un problème de texte focalisable, assurez-vous que l'élément textuel est marqué comme élément d'accessibilité pour que VoiceOver puisse l'atteindre et l'annoncer. 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.

UIKit

Pour corriger dans Storyboard :

1. Naviguez jusqu'à l'élément textuel.
2. Confirmez que le panneau d'inspection est visible.
3. Sélectionnez le Inspecteur d'identité.
4. Sous Accessibilité, cochez la case « Activé ».

Pour corriger dans le code, rendez l'élément textuel focalisable par VoiceOver :

label.isAccessibilityElement = true

SwiftUI

Dans SwiftUI, les éléments textuels sont accessibles par défaut. Assurez-vous que le texte est pertinent et apporte un contexte, et ne le cachez pas en utilisant le modificateur de vue d'accessibilité cachée.

React Native

Dans React Native, les éléments textuels sont accessibles par défaut. Assurez-vous que le texte est pertinent et apporte un contexte. Ne désactivez pas l'accessibilité en utilisant la propriété accessible={false} sur l'élément Text directement, ou la propriété accessibilityElementsHidden=true sur un élément parent.

Flutter

Dans Flutter, les éléments Text sont inclus dans l'arbre d'accessibilité par défaut. Assurez-vous que le texte est pertinent et apporte un contexte. N'excluez pas le texte visible de l'arbre d'accessibilité en l'entourant de ExcludeSemantics ou de Semantics(excludeSemantics: true).

Puis-je ignorer cette règle ?

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

Ressources

Pages de cours de Deque University

• 1.3.2 Séquence significative (A)

Remarque : 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 de WCAG 2.0
  • Comprendre 1.3.2 A - Séquence significative