Überschriftenhierarchie

Die Überschriftenhierarchie ist die Disziplin, <h1>-<h6>-Elemente so einzusetzen, dass sie eine konsistente Gliederung des Seiteninhalts bilden. Richtig umgesetzt gibt sie Screenreader-Nutzenden ein kostenloses Inhaltsverzeichnis. Falsch umgesetzt — durch übersprungene Ebenen, rein dekorative Überschriften, mehrfache h1-Elemente oder generische Divs als Überschriften — macht sie die Seite für Nutzende assistiver Technologien unverständlich.

Die Grundstruktur

<h1>Artikeltitel (einmal pro Seite)</h1>
  <h2>Hauptabschnitt</h2>
    <h3>Unterabschnitt</h3>
    <h3>Unterabschnitt</h3>
  <h2>Hauptabschnitt</h2>
    <h3>Unterabschnitt</h3>
      <h4>Unterunterabschnitt</h4>

Die Regeln:

1. Ein <h1> pro Seite — der primäre Titel der Seite. Mehrere h1-Elemente verwirren Screenreader über die Identität der Seite.
2. Keine übersprungenen Ebenen beim Absteigen. Auf ein <h2> kann ein <h3> folgen (eine Ebene tiefer), nicht aber ein <h4> (zwei Ebenen tiefer). Ein übersprungenes Level signalisiert dem Screenreader, dass dazwischen etwas fehlt.
3. Überschriften spiegeln die Inhaltsstruktur, nicht die visuelle Gestaltung. Wenn ein Text groß aussieht, aber keine Überschrift für neuen Inhalt ist, einen gestylten Absatz verwenden — keine Überschrift.
4. Keine leeren Überschriften. <h2></h2> ist bedeutungslos. Entweder befüllen oder entfernen.

Warum Screenreader darauf angewiesen sind

Die häufigste Screenreader-Navigation ist „zur nächsten Überschrift springen“ — die H-Taste in JAWS und NVDA, der Rotor-Modus „Überschriften“ in VoiceOver, die Überschriften-Leseoption in TalkBack.

Nutzende, die einen langen Artikel öffnen, drücken wiederholt H, um sich einen Überblick über die Struktur zu verschaffen, bevor sie irgendetwas lesen. Sind die Überschriften kohärent, erhalten sie eine kostenlose Gliederung. Sind die Überschriften rein dekorativ oder überspringen Ebenen, erhalten sie Rauschen.

Was in der Praxis schiefgeht

• Kein <h1>. Die Seite hat keine primäre Überschrift. Screenreader kündigen den Seitentitel aus <title> an, aber die seiteninternen Überschriften-Navigation hat keinen Anker. Häufig auf schlecht strukturierten CMS-Seiten, wo der Artikeltitel als formatierter Text dargestellt, aber nie als <h1> ausgezeichnet wird.
• Mehrere <h1>-Elemente. „Hero-Titel“ und „erster Abschnittstitel“ sind beide als <h1> ausgezeichnet. Screenreader-Nutzende hören zwei h1-Elemente und können nicht erkennen, welches der Seitentitel ist.
• Übersprungene Ebenen. <h1> → <h3>, weil das Design keinen Text in <h2>-Größe wollte. Die Screenreader-Navigation meldet „fehlende Überschriftenebene“.
• Divs, die als Überschriften gestylt werden. <div class="hed-xl">Abschnittstitel</div>. Der Screenreader erhält keine Überschrift. Abhilfe: das korrekte <hN> verwenden und mit CSS stylen.
• Überschriften für Layout-Zwecke. Ein <h2> auf ein Seitenleisten-Label setzen, damit es visuell wie eine Überschrift aussieht, obwohl es inhaltlich keine ist. Stattdessen einen gestylten Absatz verwenden.

Wie man die Überschriftenhierarchie prüft

Drei Ansätze:

1. Überschriftenliste im Screenreader. In NVDA Einfg+F7 drücken oder in VoiceOver VO+U → Überschriften. Die angezeigte Liste sollte als Gliederung der Seite Sinn ergeben. Tut sie das nicht, das Markup korrigieren.
2. Browser-Erweiterung HeadingsMap. Stellt die Überschriftengliederung der Seite visuell dar. Ebenen und Lücken sind sofort erkennbar.
3. axe-core-Scan. Erkennt fehlendes h1, übersprungene Ebenen (in einigen Konfigurationen) und leere Überschriften.

Warum „ein h1 pro Seite“ ein diskutierter Punkt ist

HTML5 schlug ursprünglich vor, dass verschachtelte <section>-Elemente eigene Überschriftenbereiche bilden und mehrere <h1>-Elemente erlauben würden. Browser und Screenreader haben dieses Verhalten nie implementiert. Die WCAG Working Group des W3C ist zur Empfehlung „ein h1 pro Seite“ zurückgekehrt. Die meisten modernen Styleguides und Barrierefreiheits-Audits setzen die Ein-h1-Regel durch.