Überschriften-Struktur H1-H6: Warum Hierarchie barrierefrei ist

Screenreader-Nutzer lesen eine Seite selten von oben nach unten durch. Viele springen gezielt von Überschrift zu Überschrift, um sich einen Überblick zu verschaffen — eine Funktion, die nur funktioniert, wenn die Überschriftenhierarchie tatsächlich stimmt.

Fehlt diese Struktur oder werden Überschriften nur wegen der Optik gewählt, wird die Seite für diese Nutzergruppe kaum navigierbar. Wie eine korrekte H1-H6-Struktur aufgebaut wird und wie Redakteure ohne Entwicklerkenntnisse sie im Alltag einhalten, zeigt dieser Beitrag.

Die WCAG-Anforderung an logische Überschriftenreihenfolge

WCAG verlangt, dass Überschriften eine Seite inhaltlich strukturieren und in einer logischen, verschachtelten Reihenfolge stehen. Das bedeutet: Eine H3 folgt inhaltlich auf eine H2, nicht umgekehrt, und Ebenen werden nicht übersprungen, nur weil eine kleinere Schriftgröße gewünscht ist.

Die Anforderung bezieht sich nicht auf das optische Erscheinungsbild, sondern auf die semantische Auszeichnung im Code — also darauf, welches HTML-Element tatsächlich verwendet wird, unabhängig davon, wie es per CSS formatiert ist.

Damit unterscheidet sich diese Anforderung deutlich von einem rein gestalterischen Verständnis von Überschriften: Ein fett gedruckter Absatz ohne echtes Heading-Element erfüllt die Anforderung nicht, selbst wenn er optisch wie eine Überschrift wirkt.

Warum Screenreader-Nutzer per Überschrift navigieren

Screenreader bieten eine Funktion, mit der Nutzer sich eine Liste aller Überschriften einer Seite anzeigen lassen und direkt zu einem Abschnitt springen können. Das funktioniert wie ein Inhaltsverzeichnis — vorausgesetzt, die Überschriften sind korrekt ausgezeichnet und in sich sinnvoll gegliedert.

Mehr zu diesem grundlegenden Nutzungsverhalten liest du im Beitrag Was ist ein Screenreader? Ist die Struktur durcheinander, wird aus dieser Orientierungshilfe eine verwirrende Liste ohne erkennbaren roten Faden.

Für Nutzer, die eine Seite regelmäßig auf diese Weise überfliegen, entscheidet die Qualität der Überschriften direkt darüber, wie schnell sie den gesuchten Abschnitt finden — bei einer langen Produktseite oder einem umfangreichen Ratgeberartikel macht das einen erheblichen Unterschied in der Nutzungsdauer.

Häufiger Fehler: Überschriften nur wegen der Optik gewählt

In vielen Redaktionssystemen wird die Überschriftenebene danach gewählt, wie ein Text aussehen soll, statt danach, welche inhaltliche Ebene er tatsächlich hat. Ein Absatz wird als H2 formatiert, weil er größer wirken soll, obwohl er inhaltlich einer H4 entspricht.

Dieses Muster zerstört die Navigierbarkeit für Screenreader-Nutzer, ohne dass es für sehende Besucher überhaupt auffällt — ein klassisches Beispiel dafür, dass rein visuelle Entscheidungen im CMS zu einer echten Barriere werden.

Der umgekehrte Fehler kommt ebenfalls vor: Eine inhaltlich wichtige Zwischenüberschrift wird nur als fett formatierter Text ausgezeichnet, weil die passende Heading-Ebene optisch zu groß wirkt. Auch hier fehlt der Seite dann eine Orientierungsebene, die für sehende Nutzer über die Formatierung noch erkennbar ist, für Screenreader-Nutzer aber komplett verschwindet.

Ein H1 pro Seite und korrekte Verschachtelung H2-H6

Jede Seite sollte genau eine H1 haben, die den Hauptinhalt der Seite benennt — meist identisch oder sehr ähnlich zum Seitentitel. Darunter folgen H2-Abschnitte für die Hauptgliederung, H3 für Unterpunkte innerhalb eines H2-Abschnitts, und so weiter.

Ebenen dürfen beim Abstieg nicht übersprungen werden, also keine H4 direkt unter einer H2 ohne dazwischenliegende H3. Beim Aufstieg zurück zu einer höheren Ebene ist das dagegen unproblematisch, etwa von H3 zurück zu einer neuen H2.

In der Praxis reichen für die meisten Ratgeberartikel und Produktseiten H2 und H3 vollständig aus. Tiefere Ebenen wie H5 oder H6 kommen selten vor und deuten oft eher auf eine zu kleinteilige Gliederung hin, die sich auch durch klarere H2- und H3-Abschnitte lösen ließe.

Redaktionsleitfaden für CMS-Redakteure ohne Entwicklerkenntnisse

Für Redakteure ohne technischen Hintergrund hilft eine einfache Faustregel statt einer langen technischen Erklärung: Bevor eine Überschriftenebene gewählt wird, die Frage stellen, ob dieser Abschnitt inhaltlich unter dem vorherigen Abschnitt steht oder eine neue, gleichrangige Ebene beginnt.

Ergänzend hilft eine kurze Vorlage im CMS, die zeigt, welche Ebene für welchen Zweck vorgesehen ist — etwa H2 für Hauptabschnitte, H3 für Unterpunkte innerhalb eines Abschnitts, nie eine Ebene nur wegen der Schriftgröße.

Viele CMS-Editoren zeigen die tatsächliche Heading-Ebene beim Formatieren direkt an, etwa als Dropdown mit „Überschrift 2“ statt nur einer optischen Stilauswahl. Ein kurzer Hinweis im Redaktionsleitfaden, dieses Dropdown statt reiner Textformatierung zu nutzen, verhindert schon einen Großteil der typischen Fehler.

Prüfwerkzeuge zur Kontrolle der Überschriftenstruktur

Automatisierte Prüfwerkzeuge zeigen zuverlässig, wenn Ebenen übersprungen werden, mehrere H1 auf einer Seite vorkommen oder eine Seite komplett ohne Überschriftenstruktur auskommt. Ein automatisierter Scan deckt diese Fehler meist schneller auf als eine manuelle Durchsicht des Quelltexts.

Für die inhaltliche Logik der Verschachtelung — ob eine Ebene tatsächlich sinnvoll unter der vorherigen steht — bleibt aber eine kurze manuelle Kontrolle sinnvoll, weil das kein rein technisches, sondern ein redaktionelles Kriterium ist.

Eine einfache manuelle Kontrolle gelingt auch ohne Entwicklerkenntnisse: Die Überschriftenliste des Browsers oder eines Screenreaders öffnen und prüfen, ob sich daraus ein sinnvolles Inhaltsverzeichnis der Seite ergibt. Wirkt diese Liste zusammenhanglos, stimmt meist auch die Struktur im Code nicht.

Typische Grenzfälle im Redaktionsalltag

Schwierig wird es bei wiederkehrenden Bausteinen wie Teaser-Kacheln oder Sidebar-Elementen, deren Titel oft versehentlich als H2 oder H3 ausgezeichnet werden, obwohl sie inhaltlich neben dem eigentlichen Seitenfluss stehen. Hier hilft die Prüfung, ob der Baustein Teil der inhaltlichen Struktur ist oder rein ergänzend.

Auch bei mehrsprachigen Seiten oder Templates, die aus mehreren Modulen zusammengesetzt sind, lohnt sich eine zentrale Prüfung der resultierenden Gesamtstruktur, da einzelne Module für sich genommen korrekt sein können, in Kombination aber eine unlogische Reihenfolge ergeben.

Ein weiterer Grenzfall sind eingebettete FAQ- oder Akkordeon-Bereiche, bei denen jede Frage oft versehentlich dieselbe Heading-Ebene wie die umgebenden Hauptabschnitte erhält. Hier hilft es, Fragen konsequent eine Ebene tiefer als den umgebenden Abschnitt anzusiedeln.

Hinweis: Dieser Beitrag richtet sich an Redaktionsteams und ersetzt keine technische Einzelprüfung komplexer Templates.

Häufig gestellte Fragen