Überschriftenstruktur und Barrierefreiheit: h1 bis h6 richtig nutzen

Warum die Überschriftenstruktur für die Barrierefreiheit zählt

Wer den Bildschirm sieht, erkennt eine Überschrift auf einen Blick. Die Erläuterungen zu 1.3.1 beschreiben das so: Überschriften erscheinen oft in größerer, fetter Schrift und sind durch Leerzeilen von Absätzen getrennt. Diese Struktur wird über die visuelle Darstellung wahrgenommen.

Schwierig wird es, wenn sich die Darstellung ändert. Das W3C nennt zwei Situationen: Der Inhalt wird von einem Screenreader vorgelesen, oder die Nutzerin bzw. der Nutzer ersetzt das Stylesheet der Autorin bzw. des Autors durch ein eigenes. Das Erfolgskriterium 1.3.1 (Stufe A) verlangt deshalb, dass Informationen, Struktur und Beziehungen, die durch die Darstellung vermittelt werden, programmatisch ermittelt werden können oder als Text verfügbar sind.

Eine korrekt ausgezeichnete Überschrift erfüllt diese Anforderung: Ihre Existenz und ihr Rang werden Browsern und assistiven Technologien zugänglich gemacht, die daraufhin eine Navigation innerhalb der Seite anbieten können. Ein lediglich fett gesetzter Absatz macht seine Rolle als Überschrift dagegen nicht zugänglich.

Sechs Überschriftenebenen und die Verschachtelungsregel

Das W3C-Tutorial stellt eine zentrale Regel auf: Überschriften nach ihrem Rang (ihrer Ebene) verschachteln. Rang 1 ist der wichtigste, Rang 6 der unwichtigste. Eine Überschrift mit gleichem oder höherem Rang beginnt einen neuen Abschnitt; eine Überschrift mit niedrigerem Rang beginnt einen Unterabschnitt, der zum höherrangigen Abschnitt gehört.

Übersprungene Ränge können verwirren und sollten nach Möglichkeit vermieden werden. In einem Fall ist das Überspringen in Ordnung: beim Schließen von Unterabschnitten.

• Vermeiden: eine h2, auf die direkt eine h4 folgt, ohne h3 dazwischen.
• In Ordnung: eine h4, auf die eine h2 folgt, die die offenen Unterabschnitte schließt und einen neuen Abschnitt beginnt.
• Ausnahme: In festen Seitenbereichen wie einer Seitenleiste sollte sich der Rang der Überschriften nicht nach den Rängen im Inhaltsbereich richten, weil dort die Einheitlichkeit über alle Seiten hinweg wichtiger ist.

Wohin gehört die h1? Die Beispiele des W3C

Das Tutorial zeigt mehrere Beispiele für die Gliederung einer Seite. Im einfachsten Fall gliedern Überschriften nur Textpassagen, etwa den Hauptinhalt: Das Beispiel enthält eine h1, gefolgt von drei h2.

Erstes Beispiel einer vollständigen Seite: Die Überschrift mit Rang 1 ist die erste Überschrift im Dokument. Navigationsmenü, Seitenleiste, Fußbereich und Hauptinhalt erhalten Überschriften einen Rang tiefer, also h2. Im Inhalt ist ein Unterabschnitt eine h3, die wiederum durch eine h4 unterteilt wird; die nächste h2 schließt beide Unterabschnitte auf einmal.

Zweites Beispiel: Die Hauptüberschrift ist nicht der Name der Website, sondern die Überschrift des Inhalts, mit Rang 1. Die Seite beginnt mit einer h2 für das Navigationsmenü, dann einer h2 für die Seitenleiste, danach folgt die h1. Alle anderen Überschriften, auch die des Fußbereichs, sind h2, und die Zwischenüberschriften im Inhalt haben ebenfalls Rang 2, auf derselben Ebene wie die übrigen strukturellen Überschriften.

Unsere Schlussfolgerung: Entscheidend ist nicht, wo die h1 im Code steht, sondern dass der Rang jeder Überschrift zur Stellung des Abschnitts passt, den sie einleitet.

Überschriften nach Größe wählen: ein Fehler, den Sie vermeiden sollten

Unsere Einschätzung: Wer eine Überschriftenebene wegen ihres Aussehens wählt (eine h4, weil sie „kleiner“ ist, eine h1, weil sie „größer“ ist), riskiert einen Rang, der nicht mehr der tatsächlichen Gliederung des Inhalts entspricht, und damit einen Bruch der vom W3C empfohlenen Verschachtelung.

Unter den Techniken zu 1.3.1 betreffen einige die Auszeichnung der Struktur: H42 (h1–h6 zur Kennzeichnung von Überschriften verwenden), ARIA12 (role=heading zur Kennzeichnung von Überschriften verwenden), G115 (semantische Elemente zur Auszeichnung der Struktur verwenden). Andere betreffen die Darstellung: C22, eine empfohlene Technik (CSS zur Steuerung der visuellen Textdarstellung verwenden), und G140, eine hinreichende Technik (Informationen und Struktur von der Darstellung trennen, um unterschiedliche Darstellungen zu ermöglichen). Daraus folgt unsere Empfehlung: die Ebene nach der Struktur wählen und die Größe per CSS anpassen.

Es gibt auch den umgekehrten Fehler: Text, der groß und fett gestaltet ist, um wie eine Überschrift auszusehen, aber keine Überschriften-Auszeichnung hat. Das entspricht dem Fehler F2, definiert als Verstoß gegen 1.3.1, weil Änderungen der Textdarstellung zur Vermittlung von Informationen genutzt werden, ohne die passende Auszeichnung oder den passenden Text. Allgemeiner erfasst der Fehler F43 die Verwendung struktureller Auszeichnung auf eine Weise, die die Beziehungen im Inhalt nicht wiedergibt.

Überschriften und Seitenbereiche

Überschriften eignen sich auch, um Seitenbereiche zu beschriften. Das Tutorial empfiehlt, Überschriften über aria-labelledby mit ihrem Seitenbereich zu verknüpfen, und weist darauf hin, dass sichtbare Überschriften allen Nutzenden helfen, diese Bereiche zu erkennen.

Die Erläuterungen zu 1.3.1 führen außerdem unter den hinreichenden Techniken ARIA13 (aria-labelledby zur Benennung von Regionen und Landmarks verwenden), ARIA11 (ARIA-Landmarks zur Kennzeichnung von Seitenbereichen verwenden) und H101 (semantische HTML-Elemente zur Kennzeichnung von Seitenbereichen verwenden).

WCAG-Erfolgskriterien und Techniken im Überblick

Das Tutorial „Headings“ verknüpft Überschriften mit vier Erfolgskriterien unterschiedlicher Konformitätsstufen. Es gibt nach eigener Angabe Best-Practice-Empfehlungen, die diese Stufen kombinieren.

• 1.3.1 Info and Relationships, Stufe A.
• 2.4.1 Bypass Blocks, Stufe A.
• 2.4.6 Headings and Labels, Stufe AA.
• 2.4.10 Section Headings, Stufe AAA.
• Zugehörige Techniken: G130 (beschreibende Überschriften bereitstellen), G141 (eine Seite mithilfe von Überschriften gliedern), H69 (Überschriftenelemente am Anfang jedes Inhaltsabschnitts bereitstellen), H80 (den Zweck eines Links über den Linktext in Verbindung mit der vorangehenden Überschrift erkennbar machen) und PDF9 (Überschriften in PDF-Dokumenten mit Überschriften-Tags auszeichnen).

So prüfen Sie die Überschriftenstruktur Ihrer Seite

Die Erläuterungen zu 1.3.1 schlagen eine Prüfmethode vor: die Informationen nacheinander über verschiedene Modalitäten abrufen. Für Überschriften verstehen wir das so: Ist die Struktur noch verständlich, wenn die Gestaltung wegfällt? Hier eine Checkliste auf Grundlage der obigen Regeln.

Um Probleme auf all Ihren Seiten schnell zu finden, können Sie einen kostenlosen Test starten und anschließend eine kontinuierliche Überwachung einrichten, die Rückschritte bei jeder Aktualisierung der Website erkennt.

• Ist jeder Text, der optisch als Überschrift dient, mit einem Element h1 bis h6 (oder role=heading) ausgezeichnet?
• Sind die Ränge verschachtelt, ohne Sprünge wie eine h2, auf die direkt eine h4 folgt?
• Wurden die Ebenen nach der Struktur gewählt und nicht nach ihrer Anzeigegröße?
• Behalten Überschriften in festen Bereichen wie der Seitenleiste auf allen Seiten denselben Rang?
• Werden wichtige Bereiche durch eine sichtbare Überschrift eingeleitet, bei Bedarf über aria-labelledby verknüpft?

Häufige Fragen

Weiterlesen bei Conformly

• RGAA-Kriterium 9.1 ausführlich erklärt
• RGAA-Kriterium 9.2 ausführlich erklärt
• Kostenloser RGAA-Scanner für Ihre Website

Quellen

Dieser Artikel stützt sich auf die am Seitenende genannten offiziellen Quellen.

• W3C — Tutoriel titres
• W3C — Comprendre 1.3.1