Was ist eine Heading-Struktur?
Die Heading-Struktur (auch Überschriftenstruktur) beschreibt die logische und hierarchische Gliederung von Inhalten auf einer Webseite mithilfe der HTML-Elemente <h1> bis <h6>. Sie ist entscheidend dafür, dass Inhalte verständlich, zugänglich und navigierbar sind – besonders für Menschen, die Screenreader oder Tastatur zur Navigation nutzen.
Warum ist eine klare Überschriftenstruktur wichtig?
Überschriften strukturieren Inhalte – visuell und semantisch. Für Menschen mit Sehbehinderungen oder kognitiven Einschränkungen sind sie die wichtigste Orientierungshilfe auf einer Webseite. Screenreader-Nutzer:innen können sich gezielt von Überschrift zu Überschrift bewegen, um schnell die gewünschten Inhalte zu finden.
Fehlt eine logische Gliederung, wirkt die Seite unübersichtlich, verwirrend oder sogar leer – obwohl Inhalte vorhanden sind.
Grundregeln für eine barrierefreie Heading-Struktur
Jede Seite sollte genau eine
<h1>-Überschrift haben (z. B. den Haupttitel der Seite).Überschriften sollen hierarchisch aufgebaut sein:
<h2>unterhalb von<h1>,<h3>unterhalb von<h2>, usw.Es dürfen keine Ebenen übersprungen werden (z. B. nicht direkt von
<h2>zu<h4>).Überschriften sollten kurz, prägnant und aussagekräftig sein.
Sie müssen im HTML-Code als echte
<hX>-Elemente vorhanden sein – visuelle Formatierung allein reicht nicht aus.
Ein Beispiel für eine gute Heading-Struktur
<h1>Mein Konto
-<h2>Persönliche Daten
-<h2>Bestellungen
-<h3>Offene Bestellungen
-<h3>Frühere Bestellungen
-<h2>Einstellungen
Diese Struktur ist sowohl für Screenreader als auch für Suchmaschinen leicht nachvollziehbar.
Häufige Fehler in der Praxis
mehrere
<h1>-Elemente auf einer Seiterein visuell gestaltete Überschriften (z. B.
<div class="headline">) ohne semantische Auszeichnungfehlende oder unlogische Hierarchie (z. B.
<h2>folgt auf<h4>)leere Überschriften (z. B.
<h3></h3>)Formatierungen als Ersatz für semantische Überschriften (z. B.
<b>,<span style="font-size: 20px">)
Relevante WCAG-Kriterien
1.3.1 Info and Relationships – Beziehungen zwischen Inhalten müssen im Code erkennbar sein.
2.4.6 Überschriften und Beschriftungen – Überschriften müssen Inhalte beschreiben.
2.4.10 Abschnittsüberschriften – Bereiche mit zusammengehörigen Inhalten benötigen passende Überschriften.
Auch die EN 301 549, die BITV und das kommende BFSG setzen auf korrekt strukturierte Seiteninhalte.
Vorteile einer sauberen Heading-Struktur
bessere Zugänglichkeit für Screenreader-Nutzer:innen
höhere Benutzerfreundlichkeit durch klare Gliederung
positive Wirkung auf SEO, da Suchmaschinen Inhalte besser verstehen
einheitliches Erscheinungsbild im Designsystem
