Übersprungene Überschriftenebene: einfach erklärt
Also called: Überschriftenhierarchie, Übersprungene Überschrift, Überschriftenreihenfolge
Definition
Eine übersprungene Überschriftenebene ist ein Sprung um mehr als eine Stufe nach unten in der Überschriften-Hierarchie, etwa von h2 direkt zu h4. Wer per Screenreader über Überschriften navigiert, vermutet dann einen fehlenden Abschnitt.
Eine übersprungene Überschriftenebene ist ein Sprung um mehr als eine Stufe nach unten in der Überschriftenhierarchie – ein <h2> direkt gefolgt von einem <h4> oder ein <h1> gefolgt von einem <h3>. Prüftools melden das als „Überschriftenebenen sollten nur um eins steigen“ oder englisch „Heading levels should only increase by one“. Es ist eine Best-Practice-Warnung und nicht immer ein WCAG-Verstoß – aber ein Zeichen, dass die Gliederung nicht mehr zum Inhalt passt.
Was es bedeutet
Viele Screenreader-Nutzer erkunden eine Seite zuerst über ihre Überschriften, so wie Sehende fett gedruckte Titel überfliegen. Überschriften bilden ein Inhaltsverzeichnis: Ein <h3> gehört zum <h2> davor. Fehlt eine Ebene, hat dieses Verzeichnis eine Lücke. Wer zuhört, kann nicht erkennen, ob ein Abschnitt fehlt, versteckt ist oder nur anders gestaltet wurde.
Die zugehörige Regel ist WCAG 1.3.1 Info und Beziehungen, ein Kriterium der Stufe A in WCAG 2.2. Visuell vermittelte Struktur – auch Überschriften – muss programmatisch ermittelbar sein. Wer Überschriften mit <h1> bis <h6> auszeichnet (Technik H42), erfüllt das. Die W3C-Erläuterung führt übersprungene Ebenen nicht als Fehler. Die empfohlene Technik G141 verlangt „korrekt verschachtelte“ Überschriften, und das W3C-Tutorial zu Überschriften ergänzt: Übersprungene Ränge können verwirren und sollten möglichst vermieden werden.
| Abfolge | Bewertung |
|---|---|
| h1 → h2 → h3 | Korrekt verschachtelt |
| h3 → h2 (Unterabschnitt endet) | In Ordnung – laut W3C beim Schließen von Unterabschnitten zulässig |
| h2 → h4 | Übersprungene Überschriftenebene – Best-Practice-Warnung |
| Fetter Absatz, der wie eine Überschrift aussieht | Kann 1.3.1 verletzen – Struktur nicht programmatisch |
Die häufigste Ursache: Die Ebene wird nach Schriftgröße gewählt. Das Design verlangt eine kleine Überschrift, also greift die Redaktion zu <h4>. Die Größe gehört ins CSS – die Ebene beschreibt die Position in der Gliederung.
Praxisbeispiele
<!-- Übersprungene Überschriftenebene: h2 gefolgt von h4 -->
<h1>Laufschuhe</h1>
<h2>Trailrunning</h2>
<h4>Wasserdichte Modelle</h4> <!-- wegen der kleinen Schrift gewählt -->
<!-- Behoben: richtige Ebene, Größe per CSS -->
<h1>Laufschuhe</h1>
<h2>Trailrunning</h2>
<h3 class="heading-small">Wasserdichte Modelle</h3>
<!-- In Ordnung: nach einem Unterabschnitt wieder nach oben -->
<h3>Größentabelle</h3>
<h2>Straßenlauf</h2>Die Ebene aus der Gliederung ableiten (eine unter dem übergeordneten Abschnitt), per CSS-Klasse gestalten und pro Seite ein klares <h1> für den Hauptinhalt verwenden.
<h4> wählen, weil es passend aussieht, Überschriften-Tags für Sidebar-Teaser oder Deko-Texte verwenden oder Überschriften durch fette Absätze ersetzen.
So beheben Sie eine übersprungene Überschriftenebene
Häufige Fragen
Ist eine übersprungene Überschriftenebene ein WCAG-Verstoß?
Für sich allein meist nicht. WCAG 1.3.1 verlangt, dass Überschriften als Überschriften ausgezeichnet sind; die korrekte Verschachtelung empfiehlt das W3C als ergänzende Technik. Ein Verstoß liegt vor, wenn die ausgezeichnete Struktur dem widerspricht, was Nutzer sehen.
Darf ich von h3 zurück zu h2 springen?
Ja. Endet ein Unterabschnitt, ist der Sprung nach oben normal. Nur nach unten sollte es Stufe für Stufe gehen.
Darf eine Seite mit h2 statt h1 beginnen?
Das ist kein WCAG-Verstoß. Die meisten Prüfungen empfehlen aber ein <h1>, das den Hauptinhalt benennt, damit die Gliederung einen klaren Anfang hat.
Wie finde ich übersprungene Überschriftenebenen auf meiner Website?
Prüfen Sie eine Seite pro Template, denn dort liegt meist die Ursache. Der kostenlose WCAG-Scanner zeigt die betroffenen Überschriften zusammen mit verwandten Strukturfehlern wie einem fehlenden lang-Attribut.
Related terms
Doppelte ID: Warum sie Barrierefreiheit noch stört
Eine doppelte ID ist ein id-Wert, der auf derselben Seite an mehr als einem Element steht. Labels, ARIA-Attribute und Sprungmarken, die auf diese id verweisen, erreichen dann nur das erste Element – andere Felder verlieren Namen oder Beschreibung.
Read definition: Doppelte ID: Warum sie Barrierefreiheit noch störtFehlendes lang-Attribut: Fehler erklärt und behoben
Ein fehlendes lang-Attribut bedeutet, dass das html-Element einer Seite kein lang-Attribut hat – oder ein leeres bzw. ungültiges. Browser und Screenreader können dann nicht erkennen, in welcher Sprache die Seite geschrieben ist.
Read definition: Fehlendes lang-Attribut: Fehler erklärt und behobenLeerer Link: Fehler verstehen und beheben
Ein leerer Link ist ein Link ohne zugänglichen Namen – ohne Text, ohne Alternativtext im enthaltenen Bild und ohne aria-label. Screenreader können nur ansagen, dass es ein Link ist, aber nicht, wohin er führt.
Read definition: Leerer Link: Fehler verstehen und beheben