Jetzt Test anfragen
Jetzt Test anfragen
zum vorherigen Prüfschritt

Prüfschritt 11.1.3.1a Info und Beziehungen – Überschriften

zum nächsten Prüfschritt

Was wird geprüft?

Überschriften, die zur Beschreibung von Inhalten eingesetzt werden, müssen auch semantisch als Überschriften ausgezeichnet sein.

Die eingesetzten Überschriften sollten die strukturelle Hierarchie des Inhalts richtig wiedergeben. Aktuell können jedoch unterschiedliche Überschriftsebenen unter Android lediglich in WebViews mit Web-Techniken (h1 - h6 bzw. durch den Einsatz von ARIA-Rollen und -Attributen) realisiert werden. Aufgrund technischer Begrenzungen können Umsetzende hier nur ein UI-Element als einfache Überschrift auszeichnen.

Unter iOS und iPadOS lassen sich , zusätzlich zur Auszeichnung in Webviews, Überschriftsebenen auch in nativen Ansichten auszeichnen, siehe dazu 3. Hinweise.

Warum wird das geprüft?

Visuell können Inhalte durch Überschriften strukturiert werden. Dank dieser Strukturierung weiß der Benutzer, was zusammengehört, kann die Inhalte der Ansicht leicht überblicken und gezielt auf Inhalte zugreifen, die ihn interessieren.

Nutzende, denen diese visuelle Ordnung nicht zur Verfügung steht, zum Beispiel, weil sie blind sind oder nur einen kleinen Ausschnitt der Seite sehen können, sind darauf angewiesen, dass die Struktur unabhängig von der Darstellung auf dem Bildschirm zugänglich und nutzbar ist. Die Verwendung von semantischen Überschriften ist dafür eine wichtige Voraussetzung.

So können Benutzer die Überschriften-Elemente anwenden:

  • Orientierung in umfangreicheren Ansichten

  • Von Überschrift zu Überschrift springen (Screenreader-Nutzende)

  • Weitere Anpassungen sind denkbar, z.B. könnten Screenreader zukünftig Überschriften mit einer anderen Stimme oder Stimmhöhe vorlesen, um diese als solche hervorzuheben.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn es in der App Inhalte gibt, die durch visuelle Überschriften strukturiert werden. Das ist bei informationsorientierten Apps häufig der Fall.

2. Prüfung

2.1 Prüfung von nativen Inhalten

  1. App mit zu prüfender Ansicht starten.

  2. Prüfen, ob Inhalte visuell als Überschriften zu erkennen sind und zur Strukturierung eingesetzt werden.

  3. Prüfen, ob diese Überschriften ausgezeichnet sind.

  4. Screenreader starten.

  5. Die Navigationseinstellung des Screenreaders auf "Überschriften" setzen. Anschließend durch alle Überschriften der Ansicht navigieren und die Ausgabe des Screenreaders prüfen. Funktioniert das Navigieren zwischen den Überschriften mit Gesten nicht, können die Überschriften auch einzeln angetippt werden.

  6. Der Screenreader gibt eine korrekt ausgezeichnete Überschrift mit dem Wort "Überschrift" aus. Ist zusätzlich die Überschriftsebene ausgezeichnet, wird auch diese ausgegeben.

  7. Prüfen, ob die Überschriftsauszeichnung lediglich zur Erzeugung unterschiedlicher Schriftgrößen eingesetzt wird und damit die Auszeichnung missbräuchlich erfolgt.

2.2 Prüfung von WebViews

  1. Auf Webviews kann unter iOS, iPadOS und Android zwischen Überschriftsebenen unterschieden werden.

  2. Werden Überschriften mit den entsprechenden Web-Techniken (h1- h6, alternativ durch den Einsatz von ARIA-Rollen und -Attributen) ausgezeichnet, wird die entsprechende Überschriftenebene ausgegeben. Die Hierarchie der Überschriften soll dann der Gliederung der Inhalte entsprechen.

  3. Der Aufruf des Rotors (iOS) bzw. von Kontextmenü / Navigation (Android) gibt einen Hinweis, ob es sich um ein Webview oder eine native Ansicht handelt. Bei Webviews werden in der Regel mehr Navigationsmöglichkeiten angezeigt.

  4. Prüfen, ob die Überschriftsauszeichnung lediglich zur Erzeugung unterschiedlicher Schriftgrößen eingesetzt wird und damit die Auszeichnung missbräuchlich erfolgt.

3. Hinweise

  • Es ist nicht die Aufgabe des Prüfschritts zu prüfen, ob Wortwahl oder Stil der Überschriften den jeweiligen Inhalten angemessen sind.

  • Android-Entwickler haben derzeit keine Möglichkeit unterschiedliche Überschriftsebenen in nativen Ansichten auszuzeichnen. Eine fehlende Auszeichnung von Überschriftsebenen wird daher nicht negativ bewertet.

  • Unter iOS und iPadOS können seit iOS / iPadOS 15 auch in nativen Apps Überschriftsebenen ausgezeichnet werden. Die Verbreitung der Auszeichnung von Überschriftsebenen ist jedoch sehr gering. Da Android bisher keine Möglichkeit der Auszeichnung von Überschriftsebenen bietet, wird derzeit auch eine fehlende Auszeichnung unter iOS und iPadOS nicht negativ bewertet.

  • Wird vom Screenreader zusätzlich zur Rolle "Überschrift" auch die Überschriftenebene ausgegeben, handelt es sich in der Praxis derzeit meist um ein WebView, der auf HTML basiert. Überschriften sollten dann korrekt geschachtelt sein (h1 gefolgt von h2 gefolgt von h3, und so weiter), um die Gliederung der Inhalte abzubilden. Das Auslassen von Hierarchie-Ebenen muss aber kein Fehler sein, wenn dies durch die Gliederung der Inhalte gerechtfertigt ist.

  • Falls es sich um eine iOS oder iPadOS App handelt und die Ansicht Potenziell durch die Auszeichnung von Überschriftsebenen profitieren würde, sollten Entwickler auf die Möglichkeit der Auszeichnung von Überschriftsebenen in nativen Ansichten in der Bewertung hingewiesen werden.

4. Bewertung

Erfüllt:

  • Visuelle Überschriften auf der Seite sind auch semantisch als Überschriften umgesetzt.

Nicht voll erfüllt:

  • Es werden Auszeichnungen für Überschriften eingesetzt. Bei WebViews (siehe 3. Hinweise) ist die Verschachtelung der Hierarchie-Ebenen jedoch irreführend und entspricht nicht der inhaltlichen Gliederung.

Nicht erfüllt:

  • Es gibt auf der Ansicht gegliederte Inhalte. Überschriften werden jedoch nicht als solche semantisch ausgezeichnet.

Quellen

iOS

Android

Allgemeine Quellen

Überschriften richtig schachteln

To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.)..

Überschriften-Elemente und CSS-Auszeichnungen nicht missbrauchen

Using headings merely to change the appearance of text does not convey the organization of the content, and may confuse users who use headings to perceive structure or rely on them for navigation. Conversely, while applying bold format, or even class="heading", can result in the visual display of a heading, assistive technologies will not recognize such text as headings.

Einordnung des Prüfschritts

Einordnung des Prüfschritts nach WCAG 2.1

Guidelines

Success criteria

Techniques

General Techniques
Failures