Überschriften: das Inhaltsverzeichnis, das niemand sieht

Überschriften sind das Inhaltsverzeichnis deiner Seite — nur unsichtbar. HTML kennt sechs Ebenen, <h1> bis <h6>, und sie sind eine Gliederung, keine Schriftgrößen. Screenreader-Nutzer springen über diese Gliederung durch die Seite, Suchmaschinen und KI-Systeme lesen daraus, worum es in einem Abschnitt geht, und eilige Leser überfliegen sie, bevor sie irgendwo einsteigen. Auf vielen Websites ist sie kaputt, weil Baukästen und Editoren die Ebene wie eine Schriftgröße behandeln. Die Reparatur ist meist einfach: eine H1 für das Thema, darunter lückenlos absteigend, und die Größe kommt aus dem CSS.

Worum es geht

Die Ebenen bilden eine Baumstruktur, wie in einem Buch:

• H1 ist das Thema der Seite — der Buchtitel.
• H2 sind die Hauptabschnitte — die Kapitel.
• H3 sind Unterabschnitte innerhalb eines H2 — die Unterkapitel.
• H4 bis H6 gehen tiefer und werden selten gebraucht.

Liest man nur die Überschriften einer gut gebauten Seite, hat man eine Zusammenfassung.

Der Fehler entsteht beim Anlegen: Die Ebene wird danach gewählt, wie groß der Text aussehen soll. Ein H4 für die kleine Zeile über dem Button, weil H4 klein ist. Ein H2 in der Fußzeile, weil es optisch passte. Die Gliederung beschreibt dann das Layout, nicht den Inhalt. MDN sagt es knapp: Überschriften nicht benutzen, um Text zu vergrößern oder zu verkleinern — dafür gibt es die CSS-Eigenschaft font-size.

Struktur gehört ins HTML, Gestaltung ins CSS.

Was die WCAG verlangen

Drei Erfolgskriterien der WCAG 2.2 betreffen Überschriften:

Kriterium	Stufe	Was es verlangt
1.3.1 Info und Beziehungen	A	Struktur, die optisch vermittelt wird, muss programmatisch erkennbar sein
2.4.6 Überschriften und Beschriftungen	AA	Überschriften beschreiben Thema oder Zweck
2.4.10 Abschnittsüberschriften	AAA	Inhalte werden mit Abschnittsüberschriften gegliedert

1.3.1 ist der Kern: Was aussieht wie eine Überschrift, muss im Code eine sein. Die WCAG führen es ausdrücklich als Fehler, Struktur nur über die Textgestaltung zu vermitteln — und umgekehrt, Strukturelemente für die Optik zu missbrauchen. 2.4.6 schreibt keine Überschriften vor, verlangt aber, dass vorhandene Überschriften beschreiben, was folgt.

Warum es zählt

Für Screenreader-Nutzer ist die Gliederung das wichtigste Navigationsmittel. In der Umfrage von WebAIM unter Screenreader-Nutzern (Dezember 2023 bis Januar 2024) gaben 71,6 Prozent an, auf einer langen Seite zuerst über die Überschriften nach Informationen zu suchen. 88,8 Prozent finden die Überschriftenebenen dabei sehr oder etwas nützlich. Wer so arbeitet, hört sich nicht die ganze Seite an, sondern springt von Überschrift zu Überschrift. Steht in der Fußzeile ein H2, landet er dort. Hört er „Überschrift Ebene 4, Jetzt anfragen" mitten in einer Aufzählung, weiß er nicht, ob er etwas verpasst hat.

Für Google ist die Reihenfolge egal — für Menschen nicht. Googles Einstiegsleitfaden zur Suchmaschinenoptimierung sagt wörtlich, dass Überschriften in semantischer Reihenfolge großartig für Screenreader sind, es aus Sicht der Google-Suche aber keine Rolle spielt, wenn sie durcheinander stehen. Eine ideale Anzahl gibt es laut Google auch nicht. Die Überschriften selbst bleiben trotzdem wichtig: Google rät, Inhalte in Absätze und Abschnitte mit Überschriften zu gliedern, die eine klare Struktur zum Navigieren bieten.

Für KI-Systeme gilt dasselbe wie für Leser. Google schreibt in seinem Leitfaden zu den KI-Funktionen, dass perfekt semantisches HTML nicht nötig ist, es aber hilft, wo es geht — weil es anderen Nutzern wie Screenreadern das Navigieren erleichtert. Wenn ein System einen Abschnitt zitieren soll, ist eine beschreibende Überschrift die einfachste Angabe, worum es darin geht.

Und für sehende Leser ist die Struktur ebenfalls das Navigationsmittel, nur unbewusst. Kaum jemand liest eine Seite von oben nach unten.

Wie oft es schiefgeht

WebAIM prüft jedes Jahr die Startseiten der eine Million meistbesuchten Websites automatisch. Im Bericht 2026 (Prüfung im Februar 2026):

• 41,8 Prozent der Startseiten hatten übersprungene Überschriftenebenen, nach 39 Prozent im Vorjahr.
• 18,1 Prozent hatten mehr als eine H1.
• 7,5 Prozent hatten gar keine Überschrift.
• Im Schnitt kamen 29,9 Überschriften auf eine Startseite. Von den Seiten mit mindestens einem H6 hatten 94,9 Prozent auch übersprungene Ebenen — ein Hinweis, dass diese Überschriften meist nicht die Gliederung abbilden, sondern eine Schriftgröße.

Die Regeln im Einzelnen

Nach unten keine Ebene überspringen. Nach einem H2 kommt ein H2 oder H3, kein H4. Wer über die Überschriften navigiert, fragt sich sonst, wo die fehlende Ebene ist.

Nach oben springen ist in Ordnung. Das W3C-Tutorial zu Überschriften sagt ausdrücklich: Ein H2, der einen neuen Abschnitt beginnt, darf auf ein H4 folgen, weil er den vorigen Abschnitt schließt. Diese Richtung wird von manchen Prüfwerkzeugen fälschlich als Fehler gemeldet.

Die H1 benennt das Thema der Seite. Nicht den Firmennamen, nicht den Spruch im Slider. Wer nur die H1 liest, soll wissen, wo er gelandet ist.

Eine H1 oder mehrere? Hier gehen die Quellen auseinander. MDN empfiehlt, dass eine Seite in der Regel eine einzige H1 hat, die ihren Inhalt beschreibt, ähnlich wie der <title>. Das W3C-Tutorial schreibt keine Anzahl vor, und Google ist die Anzahl egal. Die praktische Antwort: Für eine normale Unternehmensseite — Leistungen, Über uns, Kontakt, ein Beitrag — nimm eine H1. Wenn eine solche Seite mehrere hat, ist das fast nie Absicht, sondern ein Baustein, der eine H1 mitbringt.

Überschriften beschreiben, was folgt. Das ist WCAG 2.4.6. „Unsere Philosophie" sagt weniger als „Warum wir ohne Baukasten arbeiten".

Was keine Überschrift ist, bekommt kein H-Tag. Beschriftungen in der Navigation, Zeilen über Buttons, Fußzeilentitel, Slogans. Gibt dein Theme sie als Überschrift aus, ist das ein Theme-Problem.

Was eine Überschrift ist, braucht ein H-Tag. Der umgekehrte Fehler: eine Zeile, die per CSS fett und groß ist, im Code aber ein normaler Absatz. Optisch eine Überschrift, technisch nicht vorhanden.

Wie eine saubere Struktur aussieht

Eine Leistungsseite:

H1  Barrierefreiheitsprüfung für WordPress-Websites
  H2  Was geprüft wird
    H3  Automatisch prüfbare Punkte
    H3  Punkte, die nur ein Mensch beurteilen kann
  H2  Wie der Ablauf aussieht
  H2  Was du am Ende bekommst
  H2  Was es kostet

Liest man nur diese sieben Zeilen, weiß man, was die Seite anbietet. Genau das ist der Test.

Ein typisches Gegenbeispiel aus einem Baukasten:

H2  Willkommen
H1  Musterbetrieb GmbH
H4  Ihr Partner seit 1998
H3  Leistungen
H4  Jetzt anfragen
H2  Newsletter abonnieren

Die H1 steht nicht zuerst und nennt die Firma statt des Themas. Der Slogan ist eine Überschrift geworden, weil H4 klein aussieht. „Jetzt anfragen" ist ein Button. Und die Fußzeile bringt ein H2 mit, das auf einer Ebene mit dem Hauptinhalt steht.

Faustregel aus der Praxis: Eine H1 und zwei Ebenen darunter reichen für fast jede Seite. Brauchst du H5 oder H6, will die Seite meist zu viel auf einmal — dann ist eine zweite Seite oft der bessere Umbau als eine tiefere Gliederung.

Wie du das selbst prüfst

Mit einer Erweiterung. HeadingsMap für Chrome und Firefox zeigt die Überschriften als Baum und markiert übersprungene Ebenen. Die Erweiterung Web Developer kann die Überschriften direkt auf der Seite beschriften.

Ohne Erweiterung. Quelltext mit Strg+U öffnen, mit Strg+F nach <h1 suchen, dann nach <h2 und so weiter. Umständlicher, aber es geht.

Der Vorlesetest. Lies nur die Überschriften laut vor, ohne den Fließtext. Ergibt das eine sinnvolle Zusammenfassung der Seite? Landen „Jetzt anfragen", „Kundenstimmen" oder „Willkommen" mitten in der Aufzählung, stimmt die Struktur nicht.

Die Überschriftenliste im Screenreader. Der kostenlose Screenreader NVDA zeigt in seiner Elementliste alle Überschriften einer Seite. Das ist die Ansicht, mit der ein blinder Nutzer tatsächlich arbeitet.

Was zu tun ist

1. Setz pro Seite eine H1, die das Thema benennt. Ist deine H1 der Firmenname, ist das der erste Fund.
2. Gliedere von oben nach unten, ohne nach unten Ebenen zu überspringen.
3. Trenn Ebene und Größe. Hat eine Überschrift ihre Ebene nur wegen der Schriftgröße, ändere die Ebene und stell die Größe im CSS ein.
4. Prüf die Bausteine, nicht nur die Seiten. Sieht ein Fehler auf allen Seiten gleich aus, kommt er aus einem Baustein oder dem Theme. Dann korrigierst du an einer Stelle statt an dreißig.
5. Nimm die Fußzeile mit. Sie wird fast immer vergessen und bringt auf vielen Websites falsche Überschriften auf jede einzelne Seite.
6. Formulier die Überschriften nach, wenn du schon dabei bist. Eine Überschrift, die den folgenden Abschnitt beschreibt, hilft dem Screenreader-Nutzer beim Navigieren, der Suchmaschine beim Einordnen und dem eiligen Leser beim Entscheiden, ob er weiterliest. Hier sind Barrierefreiheit und Auffindbarkeit dieselbe Arbeit.

Quellen

• W3C, Understanding SC 1.3.1 Info and Relationships — Stufe A, Technik H42, Fehler F2 und F43: w3.org
• W3C, Understanding SC 2.4.6 Headings and Labels — Stufe AA, verlangt keine Überschriften, aber beschreibende: w3.org
• W3C, Understanding SC 2.4.10 Section Headings — Stufe AAA: w3.org
• W3C WAI, Page Structure Tutorial: Headings — Ebenen nicht nach unten überspringen, nach oben erlaubt: w3.org
• MDN, The HTML Section Heading elements — nicht zur Schriftgröße nutzen, keine Ebenen überspringen, in der Regel eine H1, Navigation per Screenreader: developer.mozilla.org
• WebAIM, Screen Reader User Survey #10 — 71,6 Prozent navigieren zuerst über Überschriften, 88,8 Prozent finden Ebenen nützlich: webaim.org
• WebAIM, The WebAIM Million 2026 — 41,8 Prozent übersprungene Ebenen, 18,1 Prozent mehrere H1, 7,5 Prozent ohne Überschrift, H6-Befund: webaim.org
• Google Search Central, SEO-Leitfaden für Einsteiger — Reihenfolge und Anzahl der Überschriften spielen für die Suche keine Rolle: developers.google.com
• Google Search Central, Leitfaden zur Optimierung für generative KI-Funktionen — semantisches HTML nicht zwingend, hilfreich für Screenreader, Überschriften für klare Struktur: developers.google.com