Falsche Überschriftenreihenfolge: Warum das Überspringen von Ebenen die Navigation zerstört

Die meisten Screenreader lassen einen Nutzer eine Liste aller Überschriften auf einer Seite aufrufen und direkt zu einer davon springen – eine der schnellsten Möglichkeiten, eine lange Seite zu überfliegen, ohne sie von oben bis unten zu lesen, ähnlich wie das Auge eines sehenden Nutzers zwischen fett gedruckten Überschriften springt, wenn er scannt. Dieses Navigationsmodell hängt davon ab, dass Überschriften in logischer Reihenfolge verschachtelt sind: eine H1 für den Seitentitel, H2 für Hauptabschnitte, H3 für Unterabschnitte innerhalb dieser, und so weiter – niemals eine Ebene beim Abstieg überspringend.

Dies ist Teil des WCAG-Erfolgskriteriums 1.3.1 (Info und Beziehungen), Stufe A.

Die zwei Fehlermuster

Übersprungene Ebenen. Von <h1> direkt zu <h3> zu springen, ohne dazwischenliegendes <h2>, sieht nicht nur visuell seltsam aus – ein Screenreader-Nutzer, der nach Überschriftenebene navigiert, hat keine Möglichkeit zu wissen, dass ein Abschnitt übersprungen wurde, oder wird verwirrt darüber, wo er sich in der Struktur des Dokuments befindet.

<!-- Vorher -->
<h1>Jahresbericht</h1>
<h3>Umsatzaufschlüsselung</h3>

<!-- Nachher -->
<h1>Jahresbericht</h1>
<h2>Umsatzaufschlüsselung</h2>

Überschriften, die wegen der visuellen Größe gewählt wurden, nicht wegen der Dokumentstruktur. Irgendwo ein <h3> zu verwenden, rein weil "es zufällig die richtige Größe hatte" – statt weil dieser Inhalt tatsächlich ein Unterabschnitt des vorangehenden <h2> ist – zerstört die Gliederung genauso wie das Überspringen einer Ebene, obwohl auf dem Bildschirm nichts falsch aussieht. Das Überschrifts-Tag sollte immer die tatsächliche Struktur des Inhalts widerspiegeln; verwenden Sie CSS, um zu steuern, wie eine Überschrift aussieht, und das Tag selbst, um zu sagen, was sie ist.

Das umgekehrte Problem: Fetter oder großer Text, der wie eine Überschrift aussehen soll, aber ein <p> oder <span> statt eines echten Überschrifts-Tags verwendet. Dieser Fall ist in der Überschriften-Navigationsliste vollständig unsichtbar – die "Überschrift", die ein sehender Nutzer sieht, ist für einen Screenreader gar keine Überschrift, sodass zu ihr weder gesprungen noch sie zum Aufbau einer Seitengliederung genutzt werden kann.

Wie man es behebt

Wählen Sie Überschrifts-Tags zuerst nach der Dokumentstruktur aus, und gestalten Sie sie dann mit CSS so, wie es das Design verlangt – das HTML-Tag einer Überschrift und ihr visuelles Erscheinungsbild sind zwei getrennte Entscheidungen, und sie zu vermischen ist die Grundursache für fast jeden Überschriftenverstoß.

/* Eine h2 kann klein aussehen, wenn das Design das will – das Tag bleibt h2 */
h2.section-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}

Jede Seite sollte außerdem genau eine <h1> haben, die das Gesamtthema der Seite beschreibt – nicht null und nicht mehrere konkurrierende.

Offizielle Referenzen

• Deque University: empty-heading
• Deque University: heading-order
• Deque University: p-as-heading
• W3C Technique G141