Überschriften-Hierarchie: H1, H2, H3 richtig nutzen

Die Überschriften-Hierarchie ist das Inhaltsverzeichnis einer Webseite – unsichtbar in HTML, aber für Screenreader so wichtig wie die Gliederung eines Buches. Eine chaotische Hierarchie ist BFSG-relevant, weil sie eine der häufigsten Barrieren darstellt.

Die Grundregeln

1. Genau eine H1 pro Seite. Sie beschreibt das Hauptthema.
2. H2 für Hauptabschnitte, H3 für Unterabschnitte innerhalb von H2 usw.
3. Keine Sprünge nach unten. H1 → H3 ohne H2 dazwischen ist falsch.
4. Sprünge nach oben sind OK. H3 → H2 beim Wechsel zum nächsten Hauptabschnitt.
5. Überschrift muss inhaltlich zum Abschnitt passen, nicht als Styling-Wahl ("klein gewünscht" → H4).

Typisches Beispiel – richtig

H1: BFSG für Online-Shops
  H2: Was ist das BFSG?
  H2: Wen trifft es?
    H3: B2C-Shops
    H3: B2B-Shops
  H2: Ab wann?

Wie sehen Screenreader-Nutzer das?

Screenreader bieten eine "Überschriften-Liste" – ähnlich einem Inhaltsverzeichnis. Nutzer drücken H (nächste Überschrift), 1 für H1, 2 für H2 usw. Sie springen gezielt zu dem Abschnitt, der sie interessiert. Ohne korrekte Hierarchie ist diese Schnellnavigation unmöglich – die Seite fühlt sich an wie ein Buch ohne Kapitelüberschriften.

Häufige Fehler

Mehrere H1 – oft bei WordPress-Themes (Titel im Header + Artikel-Titel = 2x H1).
H1 fehlt komplett – Startseiten haben oft nur "Willkommen" als

.
Überschriften nur visuell –

Titel

.
Leere Überschriften –

WCAG-Bezug

WCAG 1.3.1 Info and Relationships (Level A) verlangt, dass Strukturen programmatisch erkennbar sind. WCAG 2.4.6 Headings and Labels (Level AA) fordert, dass Überschriften den Abschnittsinhalt beschreiben. WCAG 2.4.10 Section Headings (Level AAA) – noch strenger, aber nicht BFSG-Pflicht.