Überschriften sinnvoll strukturieren

WCAG 1.3.1, 2.4.6, 2.4.1 · leicht · etwa 45 Minuten · Stand 08.11.2026

Worum es geht

Überschriften gliedern eine Seite. Sehende erkennen sie an Größe und Schrift. Screenreader erkennen sie nur, wenn sie im Code als <h1> bis <h6> ausgezeichnet sind. Häufige Probleme in Shops: Texte, die nur fett und groß formatiert sind, Überschriften-Elemente, die nur für die Schriftgröße eingesetzt werden, leere Überschriften und Ebenen, die wild springen. WCAG 1.3.1 verlangt, dass die Struktur, die man sieht, auch im Code steckt. Nach 2.4.6 sollen Überschriften das Thema des folgenden Abschnitts beschreiben.

Wen es betrifft

Blinde Menschen mit Screenreader. Sie springen mit einer Taste von Überschrift zu Überschrift (bei NVDA die Taste H) oder lassen sich eine Liste aller Überschriften anzeigen. So überfliegen sie eine Seite, wie Sehende es mit den Augen tun.
Menschen mit kognitiven Einschränkungen oder Konzentrationsschwierigkeiten, denen klare Abschnitte beim Verstehen helfen.
Menschen mit Sehbehinderung, die mit starker Vergrößerung arbeiten und sich an deutlichen Überschriften orientieren.

So behebst du es

Eine h1 pro Seite, die den Hauptinhalt beschreibt. Auf einer Produktseite ist das der Produktname, auf einer Kategorieseite der Kategoriename. Das Logo im Kopfbereich ist in der Regel keine h1.
Ebenen der Reihe nach verwenden. Unter einer h1 folgen h2, darunter h3. Das W3C-Tutorial empfiehlt, keine Ebenen zu überspringen, weil das beim Navigieren verwirrt. Eine h2 nach einer h4 ist in Ordnung, wenn dort ein neuer Hauptabschnitt beginnt.

Schlecht:
```
<h1>Espresso Bohnen Hausmischung</h1>
<h4>Beschreibung</h4>
<p class="titel-gross">Bewertungen</p>
```
Gut:
```
<h1>Espresso Bohnen Hausmischung</h1>
<h2>Beschreibung</h2>
<h2>Zubereitung</h2>
<h3>Siebträger</h3>
<h3>Vollautomat</h3>
<h2>Bewertungen</h2>
```
Aussehen per CSS steuern, nicht über die Ebene. Wenn eine h2 kleiner aussehen soll, ändere ihre Schriftgröße. Wähle die Ebene nach der Gliederung, nicht nach der Optik.
```
.produktinfo h2 {
  font-size: 1.25rem;
}
```
Keine Überschriften für Dekoration. Werbeslogans, Preise oder "Jetzt neu!" sind keine Überschriften, wenn danach kein eigener Abschnitt folgt. Nutze dafür <p> mit einer Klasse.
Keine leeren Überschriften. Prüfe Theme-Vorlagen auf <h2></h2> ohne Inhalt oder Überschriften, die nur ein Icon enthalten. Der Screenreader sagt dann "Überschrift Ebene 2" ohne Text.
Aussagekräftig formulieren (2.4.6). "Mehr" oder "Info" als Überschrift hilft nicht. "Versand und Rückgabe" sagt, worum es geht.
Bereiche zusätzlich mit Landmarks auszeichnen. Neben Überschriften helfen <header>, <nav>, <main> und <footer> beim Springen zwischen den Bereichen der Seite. Zusammen mit Überschriften am Anfang jedes Abschnitts können Screenreader-Nutzende wiederkehrende Blöcke wie die Navigation überspringen (2.4.1).
```
<header>...</header>
<nav aria-label="Hauptmenü">...</nav>
<main>
  <h1>Espresso Bohnen Hausmischung</h1>
  ...
</main>
<footer>...</footer>
```

So prüfst du es

Überschriftenliste anzeigen: Die WAVE-Erweiterung zeigt im Reiter "Structure" alle Überschriften mit ihrer Ebene. Lies nur diese Liste. Verstehst du daraus, wie die Seite aufgebaut ist?
Screenreader: In NVDA öffnet Einfügen + F7 die Elementliste mit allen Überschriften. In VoiceOver auf dem Mac öffnet VO + U den Rotor, dort wählst du "Überschriften". Springe mit H (NVDA) durch die Seite.
axe DevTools meldet übersprungene Ebenen (heading-order), leere Überschriften (empty-heading) und Seiten ohne h1 (page-has-heading-one). Die Regel p-as-heading findet fette Absätze, die wie Überschriften aussehen.
Browser-Devtools: Im Barrierefreiheitsbaum (Chrome und Edge: "Accessibility tree" im Bereich "Accessibility") siehst du, welche Elemente als "heading" mit welcher Ebene erkannt werden.
Optischer Abgleich: Alles, was auf der Seite wie eine Überschrift aussieht, sollte auch eine sein. Alles, was als Überschrift ausgezeichnet ist, sollte einen Abschnitt einleiten.