Titre de l'écran

Ce que Nous Vérifions

Chaque écran au sein d'une application doit fournir un titre unique et descriptif qui sera annoncé par la technologie d'assistance.

Exemple Échoué ❌

screen title = {nom de l'app seulement}

VoiceOver annonce uniquement le nom de l'application lorsque l'écran s'ouvre
"ShopEase"

Exemple Réussi ✅

screen title = "ShopEase, Panier"

VoiceOver annonce le titre descriptif de l'écran lorsque l'écran s'ouvre
"ShopEase, Panier"

En Résumé

• Cette règle a un impact modéré pour les utilisateurs
• Chaque écran a besoin d'un titre unique et descriptif — pas seulement du nom de l'application
• UIKit : définir navigationController?.title ou la propriété title sur le ViewController
• SwiftUI : ajouter un modificateur .navigationTitle() au corps de la vue
• React Native : ajouter options={{title: 'Screen Title'}} à chaque Stack.Screen

Impact sur les Utilisateurs

Les titres d'écran permettent aux utilisateurs avec des handicaps visuels, cognitifs et moteurs, ainsi qu'avec 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 d'un utilisateur dépend de l'audio.

Lorsqu'un écran n'a pas de titre, VoiceOver n'annoncera pas un titre d'écran lors de la navigation vers cet écran. Cela rend impossible pour les utilisateurs de technologies d'assistance de distinguer un écran d'un autre sans explorer le contenu complet.

Confirmer le Problème de Titre d'Écran

1. Activez VoiceOver
2. Naviguez vers l'écran dans l'application
3. L'une des situations suivantes se produira :
   • Inaccessible : VoiceOver n'annoncera pas un titre d'écran
   • Accessible : VoiceOver annoncera le titre de l'écran

Résoudre 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 la technologie d'assistance puisse l'annoncer à l'ouverture de celui-ci. Cela aide les utilisateurs à s'orienter sans avoir besoin d'explorer le contenu complet de chaque écran.

UIKit

Trouvez le ViewController qui échoue à la règle et définissez la propriété de titre du navigationController.

navigationController?.title = "Screen Title Here"

Alternativement, vous pouvez définir directement la propriété title sur le ViewController.

title = "Screen Title Here"

SwiftUI

Ajoutez un modificateur de vue .navigationTitle à la fin du dernier élément dans la propriété body de la vue.

var body: some View {
    VStack {
        Text("Below is a stepper in SwiftUI")
        StepperView()
    }.navigationTitle("Screen Title")
}

React Native

Assurez-vous que chaque composant Stack.Screen a un nom descriptif. Ajoutez options={{title: 'Screen Title'}} pour définir un titre d'écran significatif.

<Stack.Screen
    name="SettingsScreen"
    component={SettingsScreen}
    options={{title: 'Settings'}}
/>

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 véritable élément de navigation et non d'une simple vue régulière. Cela modifie la manière dont la technologie d'assistance annonce et interagit avec l'élément. Notez que définir un attribut header, comme souvent recommandé, ne satisfait pas les critères pour le 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. Dans de rares cas — comme 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équemment Posées

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 plutôt que de le mapper au titre d'écran natif, UIViewController.title. Cela entraîne des échecs inactionnables pour les développeurs.
Les lecteurs d'écran n'annoncent jamais automatiquement le titre lors de la navigation ; les utilisateurs doivent manuellement se focaliser 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 du Cours Deque University

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

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
  • 2.4.2 Page Titrée - Niveau A
• Documentation de compréhension des WCAG 2.0
  • Comprendre SC 2.4.2 - Page Titrée (Niveau A)