Bildschirmtitel

Was wir überprüfen

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

Fehlendes Beispiel ❌

screen title = {nur App-Name}

TalkBack gibt beim Öffnen des Bildschirms nur den App-Namen an
„ShopEase“

Erfolgreiches Beispiel ✅

screen title = „ShopEase, Warenkorb“

TalkBack gibt beim Öffnen des Bildschirms den beschreibenden Bildschirmtitel an
„ShopEase, Warenkorb“

Auf einen Blick

• Diese Regel hat eine mittlere Auswirkung für Benutzer
• Jeder Bildschirm benötigt einen einzigartigen, beschreibenden Titel – nicht nur den Anwendungsnamen
• Native Android: verwenden Sie Activity.setTitle(), um den Bildschirmtitel festzulegen
• React Native: fügen Sie options={{title: 'Screen Title'}} zu jedem Stack.Screen hinzu

Auswirkungen auf die Benutzer

Bildschirmtitel ermöglichen es Benutzern mit Seh-, kognitiven und motorischen Beeinträchtigungen sowie eingeschränktem Kurzzeitgedächtnis zu erkennen, wo sie sich in der Anwendung befinden, Inhalte durch den Titel auf einem Bildschirm zu identifizieren und zwischen Bildschirmen zu navigieren, wenn die Betriebsart eines Benutzers auf Audio angewiesen ist.

Hat ein Bildschirm keinen Titel, gibt TalkBack auf jedem Bildschirm nur den Anwendungsnamen an. Dies macht es für Benutzer von unterstützender Technologie unmöglich, einen Bildschirm vom anderen zu unterscheiden, ohne den gesamten Inhalt zu erkunden.

Bildschirmtitelproblem bestätigen

1. TalkBack einschalten
2. Öffnen Sie die Anwendung und navigieren Sie zum Bildschirm
3. Eines der folgenden wird passieren:
   • Nicht zugänglich: TalkBack gibt nur den Anwendungsnamen an
   • Zugänglich: TalkBack gibt den spezifischen Titel des Bildschirms statt des Anwendungsnamens an

Probleme beheben

Um Bildschirmtitelprobleme zu lösen, legen Sie für jeden Bildschirm einen einzigartigen, beschreibenden Titel fest, damit unterstützende Technologien ihn beim Öffnen des Bildschirms ansagen können. Dies hilft den Benutzern, sich zu orientieren, ohne den vollständigen Inhalt jedes Bildschirms erkunden zu müssen.

Native Android

Legen Sie den Titel des Bildschirms innerhalb von Activity fest. Der Titel sollte den Zweck oder Inhalt des Bildschirms beschreiben.

Activity.this.setTitle("Settings");

React Native

Um Bildschirmtitelprobleme zu lösen, versuchen Sie die folgenden Ansätze:

1. Legen Sie den Bildschirmtitel in den Bildschirmoptionen von React Navigation fest. Beim Verwenden von React Navigation aktualisiert das Setzen des Titels im options-Prop des Bildschirms die native Kopfzeile. Auf Android wird dies dem Activity/Fragment-Titel zugeordnet und löst ein TYPE_WINDOW_STATE_CHANGED-Zugänglichkeitsereignis aus, das TalkBack automatisch ansagt. Dies kann statisch oder dynamisch basierend auf Routenparametern festgelegt werden.
2. Verwenden Sie navigation.setOptions() innerhalb des Bildschirms, wenn der Titel festgelegt oder aktualisiert werden muss, nach der Bildschirm geladen wird. Das Aufrufen von setOptions mit einem Titelwert innerhalb der Bildschirmkomponente aktualisiert auch den Titel der nativen Kopfzeile und löst eine TalkBack-Ankündigung aus.
3. Verwenden Sie AccessibilityInfo.announceForAccessibility(), wenn die vorherigen Ansätze nicht die Ankündigung von TalkBack auslösen. Das Kombinieren von announceForAccessibility mit dem useFocusEffect-Hook von React Navigation stellt sicher, dass die Ankündigung jedes Mal ausgelöst wird, wenn der Benutzer zu diesem Bildschirm navigiert.
4. Als letzter Ausweg setzen Sie den nativen Aktivitätstitel über ein natives Modul. Wenn die Kopfzeile von React Navigation die Ankündigung nicht auslöst, können Sie zur nativen Android-Ebene wechseln und activity.setTitle() direkt aufrufen, was das TYPE_WINDOW_STATE_CHANGED-Ereignis auslöst, das von TalkBack überwacht wird.

Benutzerdefinierte Navigationsleisten

Für ein wirklich zugängliches Erlebnis in Anwendungen, die mit React Native entwickelt wurden, muss die Navigationskopfzeile <Stack.Navigator> mit einer title-Option verwenden. Eine benutzerdefinierte Navigationsleiste kann nicht so programmiert werden, dass sie ein korrektes Navigationselement angibt und nicht nur eine normale Ansicht ist. Dies verändert, wie unterstützende Technologie das Element ansagt und damit interagiert. Beachten Sie, dass das Festlegen eines header-Attributs, wie oft empfohlen, die Kriterien für Bildschirmtitel nicht erfüllt.

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

Kann ich diese Regel ignorieren?

Bildschirmtitel hat eine mittlere Auswirkung für Benutzer, und wir empfehlen, auf jedem Bildschirm einen beschreibenden Titel festzulegen. Während dies den Zugang zu Inhalten nicht blockiert, beeinträchtigt es die Navigation für Bildschirmlese-Benutzer erheblich. In seltenen Fällen - wie beispielsweise bei einer App mit einem einzigen Bildschirm, bei der der Anwendungsname selbst klar den Bildschirm identifiziert - können Sie in Erwägung ziehen, die Regel zu ignorieren. Erfahren Sie mehr über Ignorieren von Regeln.

Häufig gestellte Fragen

Gibt es bekannte Einschränkungen mit dieser Regel?
Ja. Flutter-Apps scheitern einheitlich an der Bildschirmtitelregel, da Flutter AppBar.title als Überschriftenelement im Semantikbaum darstellt, anstatt es dem nativen Bildschirmtitel zuzuordnen, Activity.setTitle. Dies führt zu unlösbaren Fehlern für Entwickler.
Bildschirmleser geben den Titel beim Navigieren niemals automatisch an; Benutzer müssen manuell den AppBar fokussieren, um ihn zu hören. Dies betrifft alle Flutter-Apps und verursacht Bildschirmtitel-WCAG-2.4.2-Fehler, unabhängig davon, ob ein beschreibender AppBar.title vorhanden ist.

Ressourcen

Deque-Universitätskursseiten

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

Hinweis: Für den vollen Zugriff auf die Ressourcen der Deque University ist ein Abonnement erforderlich.

Weitere Ressourcen

• Richtlinien für barrierefreies Webdesign (WCAG) 2.0, W3C-Empfehlung
  • 2.4.2 Seite hat Titel - Stufe A
• WCAG 2.0 Verständnisdokumente
  • Verständnis von SC 2.4.2 - Seite hat Titel (Stufe A)