Definition: Die Überschriftenstruktur ist die Gliederung einer Seite mit den HTML-Elementen <h1> bis <h6>. Sie zeigt, welcher Abschnitt zu welchem Thema gehört und wie die Abschnitte zueinander stehen. Für viele Screenreader-Nutzende ist sie der wichtigste Weg, eine Seite zu überfliegen [1][3].
Englisch: Heading structure · Auch: Überschriftenhierarchie · Zuletzt geprüft: 27. September 2026
Warum sie so wichtig ist
Sehende Menschen überfliegen eine Seite über Größe und Gewicht der Überschriften. Wer einen Screenreader nutzt, macht das Gleiche mit der Tastatur: In NVDA springt H zur nächsten Überschrift, die Ziffern 1 bis 6 springen zur nächsten Überschrift dieser Ebene. Viele rufen zuerst eine Liste aller Überschriften auf.
In der WebAIM-Umfrage unter Screenreader-Nutzenden (2023/24) gaben 71,6 % an, auf einer langen Seite zuerst über die Überschriften nach Informationen zu suchen. 88,8 % fanden die Überschriftenebenen sehr oder eher nützlich [3].
Zwei WCAG-Kriterien greifen hier. 1.3.1 Info und Beziehungen verlangt, dass sichtbare Überschriften auch im Code Überschriften sind [2]. 2.4.6 Überschriften und Beschriftungen verlangt, dass sie das Thema beschreiben [4].
So sieht eine gute Struktur aus
<h1>Winterjacken</h1>
<h2>Filter</h2>
<h2>Produkte</h2>
<h3>Daunenjacke Nord</h3>
<h3>Parka Süd</h3>
<h2>Versand und Rückgabe</h2>Die Einrückung dient nur der Anschauung. Drei Faustregeln [1]:
- Eine
<h1>, die sagt, worum es auf der Seite geht. Das ist gängige Praxis; die WCAG schreiben keine bestimmte Anzahl vor. - Beim Absteigen keine Ebene auslassen. Auf eine
<h2>folgt eine<h3>, nicht gleich eine<h4>. Beim Aufsteigen dürfen Sie springen. - Die Ebene folgt der Gliederung, nicht der Schriftgröße. Wie groß eine Überschrift aussieht, regelt CSS.
Im Code
<!-- Sieht aus wie Überschriften, ist Text -->
<p class="gross fett">Versand</p>
<!-- Ebene nach Schriftgröße gewählt -->
<h4>Rückgabe</h4><!-- Ebene nach Gliederung, Größe per CSS -->
<h2 class="klein">Versand</h2>
<h2 class="klein">Rückgabe</h2>Häufige Fehler
- Fetter Text statt Überschrift. Optisch eine Überschrift, für den Screenreader ein Absatz.
- Überschriften als Gestaltungsmittel. Ein Teaser oder ein Preis ist keine Überschrift, nur weil er groß sein soll.
- Leere Überschriften, etwa ein
<h2>, in dem nur ein Icon steckt. - Übersprungene Ebenen, oft weil ein Baustein im CMS eine feste Ebene mitbringt. Besser sind Bausteine, bei denen die Redaktion die Ebene passend zur Seite wählt.
- Nichtssagende Texte wie „Mehr“ oder „Info“. Die Überschriftenliste liest sich dann wie ein Inhaltsverzeichnis ohne Inhalt.
Wie Reviseberg damit umgeht
Reviseberg prüft jede Seite mit axe-core. Die Regeln heading-order (übersprungene Ebene), page-has-heading-one (keine <h1>) und empty-heading (leere Überschrift) finden die strukturellen Fehler. Die ersten beiden führt axe-core als Best Practice: Reviseberg zeigt sie als „Best Practice, kein WCAG-Kriterium“, mit geringem Gewicht im Score, und lässt an ihnen kein Kriterium scheitern. Was keine Regel entscheiden kann: ob fetter Text eigentlich eine Überschrift sein müsste und ob eine Überschrift das Thema ihres Abschnitts trifft. WCAG 2.4.6 bleibt deshalb „nicht geprüft“, bis ein Mensch ein Ergebnis erfasst.
Verwandte Begriffe
Semantisches HTML · Landmark · Screenreader · Skip-Link · Accessibility Tree