Titre de l'écran

Ce que nous vérifions

Chaque écran d'une application doit fournir un titre unique et descriptif à annoncer par les technologies d'assistance.

Exemple de non-conformité ❌

screen title = {nom de l'application seulement}

TalkBack annonce seulement le nom de l'application à l'ouverture de l'écran
« ShopEase »

Exemple de conformité ✅

screen title = « ShopEase, Panier »

TalkBack annonce le titre descriptif de l'écran à l'ouverture de l'écran
« ShopEase, Panier »

Vue d'ensemble

• Cette règle a un impact modéré pour les utilisateurs
• Chaque écran doit avoir un titre unique et descriptif — pas seulement le nom de l'application
• Android natif : utilisez Activity.setTitle() pour définir le titre de l'écran
• React Native : ajoutez options={{title: 'Screen Title'}} à chaque Stack.Screen

Impact sur les utilisateurs

Les titres des écrans permettent aux utilisateurs ayant des déficiences visuelles, cognitives et motrices et une mémoire à court terme limitée de déterminer où ils se trouvent dans l'application, d'identifier le contenu d'un écran par son titre et de naviguer entre les écrans lorsque le mode de fonctionnement de l'utilisateur dépend de l'audio.

Lorsqu'un écran n'a pas de titre, TalkBack annonce uniquement le nom de l'application sur chaque écran. Cela rend impossible aux utilisateurs de technologies d'assistance de distinguer un écran d'un autre sans explorer tout le contenu.

Confirmer le problème de titre d'écran

1. Activez TalkBack
2. Ouvrez l'application et naviguez vers l'écran
3. L'un des cas suivants se produira :
   • Inaccessible : TalkBack annonce seulement le nom de l'application
   • Accessible : TalkBack annonce le titre spécifique de l'écran au lieu du nom de l'application

Corriger les problèmes

Pour résoudre les problèmes de titre d'écran, définissez un titre unique et descriptif sur chaque écran afin que les technologies d'assistance puissent l'annoncer à l'ouverture de l'écran. Cela aide les utilisateurs à s'orienter sans avoir besoin d'explorer tout le contenu de chaque écran.

Android natif

Définissez le titre de l'écran à l'intérieur de Activity. Le titre doit décrire l'objectif ou le contenu de l'écran.

Activity.this.setTitle("Settings");

React Native

Pour résoudre les problèmes de titre d'écran, essayez les approches suivantes :

1. Définissez le titre de l'écran dans les options d'écran de React Navigation. Lors de l'utilisation de React Navigation, définir le titre dans la prop options de l'écran met à jour l'en-tête natif. Sur Android, cela correspond au titre de l'Activité/Fragment et déclenche un événement d'accessibilité TYPE_WINDOW_STATE_CHANGED que TalkBack annonce automatiquement. Cela peut être défini statiquement ou dynamiquement en fonction des paramètres de la route.
2. Utilisez navigation.setOptions() à partir de l'écran si le titre doit être défini ou mis à jour après que l'écran soit monté. Appeler setOptions avec une valeur de titre à l'intérieur du composant de l'écran met également à jour le titre de l'en-tête natif et déclenche une annonce TalkBack.
3. Utilisez AccessibilityInfo.announceForAccessibility() si les approches précédentes ne déclenchent pas l'annonce de TalkBack. La combinaison de announceForAccessibility avec le hook useFocusEffect de React Navigation garantit que l'annonce est faite chaque fois que l'utilisateur navigue vers cet écran.
4. En dernier recours, définissez le titre de l'Activité native à l'aide d'un module natif. Si l'en-tête de React Navigation ne déclenche pas l'annonce, vous pouvez vous connecter à la couche Android native et appeler directement activity.setTitle(), ce qui déclenche l'événement TYPE_WINDOW_STATE_CHANGED auquel TalkBack répond.

Barres de navigation personnalisées

Pour une expérience véritablement accessible dans les applications construites avec React Native, l'en-tête de navigation doit utiliser <Stack.Navigator> avec une option title. Une barre de navigation personnalisée ne peut pas être programmée pour indiquer qu'il s'agit d'un élément de navigation approprié et non pas seulement d'une vue régulière. Cela modifie la façon dont les technologies d'assistance annoncent et interagissent avec l'élément. Notez que définir un attribut header, comme souvent recommandé, ne répond pas aux critères de Titre d'écran.

<Stack.Navigator>
      <Stack.Screen
          name="CartScreen"
          component={CartScreen}
          options={{title: 'Cart'}}
      />
</Stack.Navigator>

Puis-je ignorer cette règle ?

Le Titre d'écran a un impact modéré pour les utilisateurs, et nous recommandons de définir un titre descriptif sur chaque écran. Bien qu'il ne bloque pas l'accès au contenu, cela dégrade significativement la navigation pour les utilisateurs de lecteurs d'écran. Dans de rares cas - tels qu'une application à écran unique où le nom de l'application identifie clairement l'écran - vous pouvez envisager d'ignorer la règle. En savoir plus sur ignorer les règles.

Questions fréquentes

Y a-t-il des limitations connues avec cette règle ?
Oui. Les applications Flutter échouent universellement à la règle du Titre d'écran car Flutter expose AppBar.title comme un élément de titre dans l'arbre sémantique au lieu de le mapper au titre d'écran natif, Activity.setTitle. Cela entraîne des échecs non exploitables pour les développeurs.
Les lecteurs d'écran n'annoncent jamais automatiquement le titre lors de la navigation; les utilisateurs doivent se concentrer manuellement sur l'AppBar pour l'entendre. Cela affecte toutes les applications Flutter et cause des échecs du Titre d'écran (WCAG 2.4.2) indépendamment de la présence d'un AppBar.title descriptif.

Ressources

Pages de cours Deque University

• Structure Sémantique et Navigation (WCAG 2.1) - Tutoriel vidéo
• Critère de Succès 2.4.2 - Page Titulée
• Exigences - 2.4.2.a Titres sur les Pages

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
  • 2.4.2 Titre de la page - Niveau A
• Docs de compréhension des WCAG 2.0
  • Comprendre SC 2.4.2 - Titre de la page (Niveau A)