Überschriftenebene übersprungen (heading-order)

Die Regel heading-order meldet eine Überschrift, die mehr als eine Ebene tiefer liegt als die Überschrift davor – zum Beispiel ein h4 direkt nach einem h2. Die Lösung: Wählen Sie die Ebene nach ihrer Stellung in der Gliederung und regeln Sie das Aussehen über eine CSS-Klasse.

Was die Regel bedeutet

Überschriften bilden die Gliederung einer Seite: ein h1 für die Seite, h2 für die Hauptabschnitte, h3 für Unterabschnitte. Die Regel geht alle Überschriften in der Reihenfolge des Quelltexts durch und vergleicht jede mit der vorherigen. Wer mehr als eine Ebene nach unten springt, fällt durch – h2 → h4. Nach oben darf es beliebig weit gehen – h4 → h2 beginnt einfach einen neuen Abschnitt. Die erste Überschrift einer Seite darf jede Ebene haben.

axe zählt h1 bis h6 sowie Elemente mit role="heading", deren Ebene aus aria-level kommt. Überschriften, die vor assistiven Technologien verborgen sind, bleiben unberücksichtigt.

Wichtig: Das ist eine Best Practice, kein eigener WCAG-Verstoß. WCAG verlangt keine lückenlose Abfolge der Ebenen. Die Regel gehört aber sachlich zu 1.3.1 Info und Beziehungen, weil die Ebenen die Struktur des Inhalts tragen, und zu 2.4.6 Überschriften und Beschriftungen, weil Überschriften beschreiben sollen, was folgt.

Wen es betrifft

Vor allem blinde und sehbehinderte Menschen, die mit einem Screenreader arbeiten. Viele verschaffen sich einen Überblick, indem sie von Überschrift zu Überschrift springen (H in NVDA und JAWS, der Rotor in VoiceOver) oder die Liste aller Überschriften öffnen. Die Screenreader-Umfrage von WebAIM zeigt seit Jahren: Die Navigation über Überschriften ist der häufigste Weg, auf einer langen Seite etwas zu finden ^[5]. Ein Sprung von h2 auf h4 deutet einen fehlenden Abschnitt an und macht die Gliederung unzuverlässig.

Warum die Prüfung anschlägt

• Ebene nach Optik gewählt: Ein h4 wurde genommen, weil seine Standardgröße ins Layout passte.
• Wiederverwendbare Komponenten wie Karten, Teaser oder Akkordeons mit fest eingebauter Ebene, egal auf welcher Seite sie stehen.
• Seitenbaukästen und CMS-Blöcke, in denen Redakteurinnen „Überschrift 4“ aus einem Stilmenü wählen.
• Widgets in Seitenleiste oder Footer mit h5- oder h6-Titeln direkt nach einem h2.
• Unsichtbare Überschriften für Screenreader, die auf der falschen Ebene eingefügt wurden.

So beheben Sie es

Legen Sie die Ebene nach der Gliederung fest und gestalten Sie sie über eine Klasse. Komponenten, die an verschiedenen Stellen vorkommen, sollten die Ebene als Einstellung annehmen, statt sie im Template festzuschreiben.

<!-- Vorher: Die Kartentitel springen von h1 auf h4, weil h4 „passend aussah“ -->
<h1>Unsere Leistungen</h1>
<div class="card-grid">
  <div class="card"><h4 class="card__title">Webdesign</h4></div>
  <div class="card"><h4 class="card__title">Hosting</h4></div>
</div>

<!-- Nachher: h2 ist die richtige Ebene, die Klasse behält die kleinere Optik -->
<h1>Unsere Leistungen</h1>
<div class="card-grid">
  <div class="card"><h2 class="card__title">Webdesign</h2></div>
  <div class="card"><h2 class="card__title">Hosting</h2></div>
</div>

Die Größe kommt jetzt aus dem CSS, nicht vom Element:

/* Die Optik gehört zur Klasse, die Ebene zur Gliederung */
.card__title { font-size: 1.125rem; font-weight: 600; }

So prüfen Sie es von Hand

1. Lassen Sie sich die Gliederung anzeigen: mit der kostenlosen Erweiterung HeadingsMap, der Strukturansicht der Erweiterung WAVE oder der Überschriftenliste eines Screenreaders (NVDA: Einfügen + F7, VoiceOver: VO + U).
2. Lesen Sie die Liste für sich allein. Ergibt sie ein sinnvolles Inhaltsverzeichnis? Geht es nach unten immer nur eine Ebene tiefer?
3. Vergleichen Sie mit der sichtbaren Seite: Text, der wie eine Überschrift aussieht, aber nur fett gesetzt ist, fehlt in der Liste.
4. Die Regel prüft nur die Zahlen. Ob eine Überschrift ihren Abschnitt beschreibt und ob der Abschnitt auf der richtigen Ebene steht, muss ein Mensch beurteilen.

Zugehöriges WCAG-Kriterium

Keines direkt – heading-order ist eine Best Practice. Sachlich gehört sie zu 1.3.1 Info und Beziehungen und 2.4.6 Überschriften und Beschriftungen. Überschriften sind außerdem ein Weg, 2.4.1 Blöcke umgehen zu erfüllen.

So meldet Reviseberg diese Regel

Reviseberg führt heading-order auf jeder gecrawlten Seite aus. Jede Überschrift, die eine Ebene überspringt, ist ein Vorkommen. Eine Kartenkomponente, die überall eingesetzt wird, taucht deshalb auf vielen Seiten gleichzeitig auf. In der Befundliste steht die Regel als Best Practice mit Schweregrad, der Zahl der Elemente und Seiten und den Punkten, die ein Fix zurückbringt; sie zählt nie gegen ein WCAG-Kriterium und erscheint in keinem Konformitätsbericht. Im Detail sehen Sie Selektor und HTML-Ausschnitt jeder Überschrift und alle betroffenen Seiten. Mit Begründung können Sie einen Befund als „ignorieren“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert.

Verwandte Regeln

• undefined – die Seite hat gar keine Überschrift der ersten Ebene.
• undefined – eine Überschrift ohne Text.
• undefined – Inhalt außerhalb der Landmarks der Seite.

Überschriftenstruktur Ihrer ganzen Website prüfen – kostenloser Scan