Bildschirmtitel

Was wir überprüfen

Jeder Bildschirm innerhalb einer Anwendung sollte einen eindeutigen, beschreibenden Titel bieten, der von unterstützender Technologie angesagt wird.

Fehlendes Beispiel ❌

screen title = {nur App-Name}

VoiceOver kündigt nur den App-Namen an, wenn der Bildschirm öffnet
„ShopEase“

Gültiges Beispiel ✅

screen title = „ShopEase, Warenkorb“

VoiceOver kündigt den beschreibenden Bildschirmtitel an, wenn der Bildschirm öffnet
„ShopEase, Warenkorb“

Auf einen Blick

• Diese Regel hat eine moderate Auswirkung für Benutzer
• Jeder Bildschirm benötigt einen eindeutigen, beschreibenden Titel — nicht nur den Anwendungsnamen
• UIKit: setzen Sie navigationController?.title oder die title-Eigenschaft im ViewController
• SwiftUI: fügen Sie einen .navigationTitle()-Modifier zum View-Body hinzu
• React Native: fügen Sie options={{title: 'Screen Title'}} zu jedem Stack.Screen hinzu

Auswirkung auf Benutzer

Bildschirmtitel ermöglichen es Benutzern mit visuellen, kognitiven und motorischen Behinderungen sowie eingeschränktem Kurzzeitgedächtnis zu bestimmen, wo sie sich in der Anwendung befinden, Inhalte auf einem Bildschirm anhand des Titels zu identifizieren und zwischen Bildschirmen zu navigieren, wenn der Betriebsmodus des Benutzers vom Audio abhängt.

Wenn ein Bildschirm keinen Titel hat, wird VoiceOver keinen Bildschirmtitel ansagen, wenn man zu diesem Bildschirm navigiert. Dies macht es Benutzern von unterstützender Technologie unmöglich, einen Bildschirm vom anderen zu unterscheiden, ohne den gesamten Inhalt zu erkunden.

Bildschirmtitel-Problem bestätigen

1. VoiceOver einschalten
2. Navigieren Sie zum Bildschirm in der App
3. Eines der folgenden wird passieren:
   • Nicht zugänglich: VoiceOver wird keinen Bildschirmtitel ansagen
   • Zugänglich: VoiceOver wird den Bildschirmtitel ansagen

Probleme beheben

Um Bildschirmtitelprobleme zu lösen, setzen Sie einen eindeutigen, beschreibenden Titel auf jedem Bildschirm, damit unterstützende Technologie ihn ansagen kann, wenn der Bildschirm öffnet. Dies hilft den Benutzern, sich zu orientieren, ohne den gesamten Inhalt jedes Bildschirms erkunden zu müssen.

UIKit

Finden Sie das ViewController, das gegen die Regel verstößt, und setzen Sie die Titel-Eigenschaft des navigationController.

navigationController?.title = "Screen Title Here"

Alternativ können Sie die title-Eigenschaft direkt auf dem ViewController setzen.

title = "Screen Title Here"

SwiftUI

Fügen Sie eine .navigationTitle-Ansichtsmodifikation am Ende des letzten Elements innerhalb der body-Eigenschaft der Ansicht hinzu.

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

React Native

Stellen Sie sicher, dass jede Stack.Screen-Komponente einen beschreibenden Namen hat. Fügen Sie options={{title: 'Screen Title'}} hinzu, um einen aussagekräftigen Bildschirmtitel zu definieren.

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

Benutzerdefinierte Navigationsleisten

Für ein wirklich barrierefreies Erlebnis in Anwendungen, die mit React Native gebaut wurden, muss der Navigationsheader <Stack.Navigator> mit einer title-Option verwenden. Eine benutzerdefinierte Navigationsleiste kann nicht so programmiert werden, dass sie anzeigt, dass sie ein richtiges Navigationselement ist und nicht nur eine normale Ansicht. Dies ändert, wie unterstützende Technologie das Element ankündigt und mit ihm interagiert. Beachten Sie, dass das Setzen eines header-Attributs, wie oft empfohlen, die Kriterien für den Bildschirmtitel nicht erfüllt.

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

Kann ich diese Regel ignorieren?

Der Bildschirmtitel hat eine Moderate Auswirkung für Benutzer, und wir empfehlen, auf jedem Bildschirm einen beschreibenden Titel festzulegen. In seltenen Fällen — wie bei einer App mit nur einem Bildschirm, bei der der Anwendungsname selbst den Bildschirm klar identifiziert — können Sie in Erwägung ziehen, die Regel zu ignorieren. Erfahren Sie mehr über Regeln ignorieren.

Häufig gestellte Fragen

Gibt es bekannte Einschränkungen mit dieser Regel?
Ja. Flutter-Apps scheitern universell an der Bildschirmtitelregel, weil Flutter AppBar.title als Überschriftselement im Semantikbaum darstellt, anstatt es als nativen Bildschirmtitel zuzuordnen, UIViewController.title. Dies führt zu nicht lösbaren Fehlern für Entwickler.
Bildschirmleser kündigen den Titel beim Navigieren nie automatisch an; Benutzer müssen manuell den AppBar fokussieren, um ihn zu hören. Dies betrifft alle Flutter-Apps und verursacht Bildschirmtitel-Ausfälle (WCAG 2.4.2), unabhängig davon, ob ein beschreibender AppBar.title vorhanden ist.

Ressourcen

Deque University Kursseiten

• Semantische Struktur und Navigation (WCAG 2.1) - Video-Tutorial
• Erfolgskriterium 2.4.2 - Seite betitelt
• Anforderungen - 2.4.2.a Titel auf Seiten

Hinweis: Voller Zugang zu den Ressourcen der Deque University erfordert ein Abonnement.

Andere Ressourcen

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C-Empfehlung
  • 2.4.2 Seitentitel - Stufe A
• WCAG 2.0 Verstehensdokumente
  • Verständnis von SC 2.4.2 - Seitentitel (Stufe A)