Titre de l’écran

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

WCAG 2.0 - 2.4.2 [Term to be replaced] Impact – Modéré

Chaque écran d’une application doit fournir un titre qui sera annoncé par la technologie d’assistance.

Impact

Les titres d’écran permettent aux utilisateurs souffrant de handicaps visuels, cognitifs et moteurs et d’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 dans les cas où le mode de fonctionnement d’un utilisateur dépend de l’audio.

Confirmation

  1. Accéder à un nouvel écran dans l'application
  2. L’une des situations suivantes se produira :
    • Inaccessible : VoiceOver n'annonce pas le titre d'un écran
    • Accessible : VoiceOver annoncera le titre de l'écran

Comment corriger

Ce problème se produit lorsqu'aucun titre n'est attribué à un écran.

UIKit

En code :

Recherchez le ViewController qui ne respecte pas la règle et définissez la propriété title du contrôleur de navigation.

navigationController?.title = "Screen Title Here"

Alternativement, vous pouvez définir la propriété title directement 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 Stack.Screen composant possède un nom descriptif. Si nécessaire, ajoutez options={{title: 'New Screen Title'}} pour définir un meilleur titre d'écran.

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

Barres de navigation personnalisées

Ce que nous avons constaté dans les applications créées avec React Native, c'est que pour une expérience véritablement accessible, l'en-tête de navigation doit être défini avec <Stack.Navigator> des options de titre. Une barre de navigation personnalisée n'a aucun moyen d'être codée par programmation pour indiquer qu'il s'agit d'un élément de navigation approprié et non pas simplement d'une vue ordinaire. Cela modifie la manière dont la technologie d’assistance annonce et interagit avec l’élément. Notez que la définition d’un attribut d’en-tête, comme souvent recommandé, ne répond pas aux critères pour le titre de l'écran.