Eine saubere Überschriftenstruktur ist für blinde Menschen das, was Sehende mit einem Blick erfassen: die Landkarte einer Seite. Denn rund zwei Drittel aller Screenreader-Nutzer bewegen sich in erster Linie über die Überschriften durch eine Seite – sie sind damit das mit Abstand wichtigste Navigationsmittel. Sind die Überschriften falsch gesetzt oder fehlen sie ganz, verliert ein Mensch die Orientierung komplett. In diesem Ratgeber zeige ich Ihnen aus der Audit-Praxis, welche Regeln gelten, welche WCAG-Kriterien dahinterstehen, welche Fehler ich am häufigsten sehe und wie Sie Ihre Struktur in fünf Minuten selbst prüfen.

Was ist eine barrierefreie Überschriftenstruktur?

Eine barrierefreie Überschriftenstruktur ist die logische Gliederung einer Seite über die Elemente H1 bis H6. Sie bildet die Hierarchie der Inhalte ab: Die H1 nennt das Hauptthema, die H2 markiert große Abschnitte, die H3 deren Unterabschnitte. Entscheidend ist, dass diese Hierarchie nicht nur sichtbar gestaltet, sondern technisch im Code ausgezeichnet ist. Erst diese Auszeichnung macht aus einer optischen Gliederung eine, die Hilfsmittel verstehen.

Genau hier liegt der Kern der Sache. Eine Überschrift muss als Überschrift im Code stehen, nicht nur größer und fett aussehen. Denn nur dann erkennen Hilfsmittel sie als das, was sie ist – als Strukturelement und Sprungmarke.

Das zugrunde liegende Kriterium ist eindeutig. Das Erfolgskriterium 1.3.1 Info und Beziehungen (Stufe A) verlangt, dass die visuell erkennbare Struktur auch programmatisch verfügbar ist. Eine Überschrift, die nur optisch existiert, erfüllt das nicht. Daher ist die technische Auszeichnung der eigentliche Kern jeder guten Struktur.

Warum Überschriften das wichtigste Navigationsmittel sind

Überschriften sind für Screenreader-Nutzer der schnellste Weg durch eine Seite. Denn alle gängigen Screenreader bieten Tastenkürzel, um direkt von Überschrift zu Überschrift zu springen. Mit der Taste H geht es zur nächsten, mit den Tasten 1 bis 6 gezielt zu einer bestimmten Ebene. Dabei sagt das Hilfsmittel sowohl den Text als auch die Ebene an, etwa „Überschrift Ebene 2: Was ist WCAG“. Erst diese Ebenen-Ansage verrät dem Nutzer, ob er sich in einem Hauptabschnitt oder einem Unterpunkt befindet.

So werden Überschriften zum Inhaltsverzeichnis einer Seite. Ein blinder Mensch überfliegt damit die Struktur und springt direkt zu dem Abschnitt, der ihn interessiert – ganz ohne den Text dazwischen zu hören. Genau das leistet für Sehende das visuelle Überfliegen einer Seite. Überschriften geben blinden Menschen also dieselbe Abkürzung, die Sehende mit den Augen nehmen.

Die Verbreitung ist beachtlich. Laut der Screenreader-Umfrage von WebAIM navigieren rund 67 Prozent der Nutzer in erster Linie über Überschriften. Sie sind damit die mit Abstand häufigste Navigationsmethode. Wie Screenreader grundsätzlich arbeiten, zeige ich im Ratgeber zu Screenreadern.

Wer von guten Überschriften profitiert

Von einer klaren Überschriftenstruktur profitieren weit mehr Menschen als nur Screenreader-Nutzer. Denn Überschriften sind eine Hilfe für alle, die eine Seite überfliegen, statt sie Wort für Wort zu lesen. Und das tun fast alle.

Besonders deutlich wird der Nutzen bei kognitiven Themen. Menschen mit ADHS, Legasthenie oder einer kognitiven Einschränkung verlassen sich stark auf die sichtbare Gliederung, um sich zu orientieren und eine Stelle später wiederzufinden. Auch sehende Nutzer springen über Überschriften zur gesuchten Information, statt jeden Absatz zu lesen. Gerade auf dem kleinen Smartphone-Bildschirm ist diese Möglichkeit, eine Seite zu überfliegen, besonders wertvoll.

Hinzu kommt ein praktischer Vorteil. Eine sauber gegliederte Seite ist auch für die nächste Entwicklerin leichter zu pflegen, ohne die Struktur versehentlich zu zerstören. Gute Überschriften nützen also nicht nur den Nutzern, sondern auch dem Team dahinter. Genau diese Struktur prüfen wir in einem Access Ready-Audit besonders gründlich.

Die Regeln: eine H1, keine Sprünge, klare Benennung

Eine barrierefreie Überschriftenstruktur folgt einigen wenigen, klaren Regeln. Sie betreffen die Anzahl der H1, die Reihenfolge der Ebenen, die Benennung und die technische Auszeichnung. Drei WCAG-Kriterien bilden dafür den Rahmen.

Regel	WCAG-Kriterium	Stufe
Struktur im Code ausgezeichnet	1.3.1 Info und Beziehungen	A
Überschriften beschreiben den Inhalt	2.4.6 Überschriften und Beschriftungen	AA
Abschnitte mit Überschriften gegliedert	2.4.10 Abschnittsüberschriften	AAA

Diese Kriterien greifen ineinander. Das eine sorgt für die technische Struktur, das andere für die Verständlichkeit, das dritte für eine durchgehende Gliederung. Die folgenden Abschnitte zeigen, was das konkret bedeutet. Keine dieser Regeln ist kompliziert – die meisten Fehler entstehen schlicht aus Unwissen.

Genau eine H1 pro Seite

Jede Seite sollte genau eine H1 haben. Diese H1 benennt das Hauptthema der Seite – wie der Titel eines Buchkapitels. Sie ist oft das Erste, was Screenreader-Nutzer bewusst ansteuern. Trägt eine Seite mehrere H1, wirkt sie auf einen Screenreader-Nutzer wie mehrere unzusammenhängende Seiten, und das eigentliche Thema bleibt unklar.

Ein häufiger Fehler betrifft das Logo. Viele Vorlagen verpacken den Seitennamen oder das Logo in eine H1. Die Folge: Jede Unterseite trägt dieselbe H1, und keine sagt etwas über ihren tatsächlichen Inhalt aus. Reservieren Sie die H1 deshalb für das, was diese eine Seite ausmacht.

Eine Feinheit gehört dazu. Streng genommen ist mehr als eine H1 nicht in jedem Fall ein Regelverstoß nach WCAG. In der Praxis stiftet sie aber fast immer Verwirrung. Deshalb gilt als bewährte Regel: eine H1, die das Seitenthema klar benennt. Diese H1 muss übrigens nicht die allererste Überschrift im Code sein – beginnt etwa die Navigation davor mit einer H2, ist das in Ordnung.

Keine Ebenen überspringen

Die Überschriften-Ebenen müssen aufeinander aufbauen, ohne Lücken. Konkret heißt das: von H1 zu H2 zu H3, niemals von H1 direkt zu H3. Wird eine Ebene übersprungen, bricht die logische Verschachtelung, und der Nutzer verliert das Verständnis dafür, wie die Abschnitte zusammenhängen.

Die Folgen sind in der Praxis spürbar. Springt eine Seite von H1 auf H3 und ein Nutzer drückt die Taste 2, hört er „keine Überschriften“ – und nimmt an, die Seite habe gar keine. So geht ihm der gesamte Inhalt verloren. Auch die meisten Prüfwerkzeuge melden übersprungene Ebenen sofort.

Eine präzise Ausnahme gibt es. Beim Schließen eines Unterabschnitts darf auf eine H4 wieder eine H2 folgen, weil damit ein neuer großer Abschnitt beginnt. Das Überspringen nach unten ist das Problem, nicht das Zurückspringen nach oben. Wie Quelltext und Anzeige zusammenhängen, vertiefe ich im Ratgeber zur DOM-Struktur. Eine seltene Ausnahme entsteht beim Einbinden fremder Inhalte, deren Ebene sich nicht ändern lässt; solange die Verschachtelung stimmig bleibt, ist das vertretbar.

Wie viele Ebenen brauchen Sie wirklich?

Sechs Überschriften-Ebenen klingen nach viel, doch die meisten Seiten brauchen nur wenige. In der Regel kommen Sie mit H2 und H3 aus. Erst sehr lange oder komplexe Seiten rechtfertigen eine H4, und H5 oder H6 sind die absolute Ausnahme.

Zu viele Ebenen schaden eher, als sie nützen. Denn eine zu tiefe Verschachtelung macht die Gliederung unübersichtlich, statt sie zu klären. Fragen Sie sich deshalb bei jeder Ebene, ob sie eine echte inhaltliche Unterordnung abbildet. Eine flache, klare Gliederung ist fast immer besser als eine tiefe, komplizierte.

Für sehr tief gegliederte Inhalte gibt es einen Sonderweg. In seltenen Fällen, etwa bei umfangreichen Rechtsdokumenten, reichen sechs Ebenen nicht aus. Dann lässt sich mit dem Attribut aria-level eine Ebene auch über H6 hinaus auszeichnen. Für den Normalfall brauchen Sie das jedoch nie.

Sichtbar ist nicht gleich semantisch

Der häufigste und folgenreichste Fehler ist die Verwechslung von Aussehen und Bedeutung. Ein Text, der groß und fett gesetzt ist, sieht für Sehende wie eine Überschrift aus. Steckt im Code aber nur ein gestyltes <p> oder <div>, ist diese „Überschrift“ für einen Screenreader unsichtbar. Sie taucht in der Navigation schlicht nicht auf.

Der umgekehrte Fehler ist genauso verbreitet. Manche Entwickler wählen eine H3, nur weil ihnen die Schriftgröße gefällt – nicht, weil es die richtige Ebene wäre. Beides ist falsch. Die Regel lautet: Wählen Sie die Ebene nach der Struktur und gestalten Sie das Aussehen per CSS.

Zwei weitere Fallen gehören hierher. Eine leere Überschrift, also ein Überschriften-Tag ganz ohne Text, ist ebenfalls ein Fehler und wird von Prüfwerkzeugen gemeldet. Und eine Überschrift als Bild-Grafik schließt alle aus, die den Text nicht sehen. Nutzen Sie stattdessen immer echte HTML-Überschriften. So sieht ein Screenreader genau das, was auch das Auge erkennt.

Überschriften, die etwas aussagen

Eine Überschrift an der richtigen Stelle nützt wenig, wenn sie nichts aussagt. Genau das verlangt das Erfolgskriterium 2.4.6 Überschriften und Beschriftungen (Stufe AA): Eine Überschrift muss Thema oder Zweck des folgenden Inhalts beschreiben. Hier geht es nicht um Struktur, sondern um Bedeutung.

Vage Überschriften scheitern an diesem Anspruch. Ein „Mehr“, ein „Weiterlesen“ oder ein nacktes „Abschnitt 1″ hilft niemandem bei der Orientierung. Denn wer durch die Überschriften navigiert, braucht aus dem Text allein den Hinweis, was ihn erwartet.

Das Gegenbeispiel ist einfach. Über einer Zutatenliste steht „Zutaten“, über der Anleitung „Zubereitung“. So weiß ein Nutzer sofort, wohin er springen muss. Eine gute Überschrift fasst den folgenden Abschnitt in wenigen, treffenden Worten zusammen. Im Zweifel hilft eine einfache Probe: Wer nur die Überschrift liest, sollte bereits ahnen, was im Abschnitt steht.

Überschriften im CMS und in Word richtig setzen

Die meisten Strukturfehler entstehen gar nicht beim Programmieren, sondern beim Schreiben. Denn in einem Redaktionssystem oder in Word machen viele eine Zeile einfach fett und größer, statt sie als Überschrift zu kennzeichnen. Optisch wirkt das wie eine Überschrift, semantisch ist es keine.

Der richtige Weg ist überall ähnlich. Nutzen Sie die Überschriften-Formatvorlage Ihres Editors – im WordPress-Editor den Block „Überschrift“, in Word die Formatvorlage „Überschrift 2″, „Überschrift 3″ und so weiter. Nur diese erzeugen eine echte, technisch verwertbare Überschrift. Der optische Unterschied ist oft minimal, der technische dagegen entscheidend.

Das gilt für jeden Kanal. Ob Website, PDF oder Präsentation: Eine manuell formatierte Zeile bleibt für Hilfsmittel unsichtbar. Worauf es speziell bei WordPress ankommt, zeige ich im Ratgeber zu Barrierefreiheit mit WordPress.

Überschriften und Landmarken zusammen denken

Überschriften wirken am besten im Zusammenspiel mit Landmarken. Denn neben den Überschriften nutzen Screenreader auch Bereichsmarken wie Kopfbereich, Navigation, Hauptinhalt und Fußbereich, um eine Seite zu gliedern. Beide Ebenen ergänzen sich: Landmarken geben die grobe Struktur, Überschriften die feine.

Ein technischer Zusammenhang ist wichtig. Ein <section>-Bereich erhält seinen zugänglichen Namen aus einer Überschrift darin. Fehlt diese, bleibt der Bereich namenlos und damit schwer auffindbar. Auch als Ziel von Sprunglinks dienen Überschriften – etwa nach einem Klick auf „Zum Hauptinhalt springen“.

Besonders dynamische Seiten profitieren davon. Wechselt in einer Single-Page-Anwendung die Ansicht, sollte der Fokus auf die neue Hauptüberschrift wandern, damit der Nutzer die Orientierung behält. Wie man den Fokus dabei steuert, vertiefe ich im Ratgeber zur Tastaturnavigation.

Überschriften in wiederkehrenden Bereichen

Eine häufige Unsicherheit betrifft Navigation und Seitenleisten. Diese wiederkehrenden Bereiche sollen sich nicht in die Ebenen-Logik des Hauptinhalts einreihen. Stattdessen bekommen sie eine eigene, über die ganze Website hinweg gleichbleibende Ebene. Diese feste Ebene ist verlässlicher als eine, die sich ständig anpasst.

Der Grund liegt in der Konsistenz. Eine Navigation, die auf jeder Seite mit einer H2 beginnt, ist verlässlich – egal, wie der Hauptinhalt darunter gegliedert ist. Wechselt die Ebene dagegen von Seite zu Seite, verliert der Nutzer den Halt.

Eine praktische Regel hilft weiter. Steht der Hauptinhalt einer Seite unter einer H1, darf eine vorausgehende Navigation mit einer H2 beginnen, weil sie weniger wichtig ist als der eigentliche Seiteninhalt. Wichtig ist nur, dass diese Wahl überall gleich bleibt. Konsistenz schlägt an dieser Stelle die reine Lehre der Hierarchie.

Der Test: Lesen Sie nur die Überschriften

Sie brauchen kein Spezialwissen, um eine schlechte Überschriftenstruktur zu erkennen. Ein einfacher Test genügt.

Aus der Praxis – der Inhaltsverzeichnis-Test: Lesen Sie nur die Überschriften Ihrer Seite, von oben nach unten, und ignorieren Sie den restlichen Text. Ergeben diese Überschriften allein ein sinnvolles Inhaltsverzeichnis? Erzählen sie die Geschichte der Seite in der richtigen Reihenfolge? Wenn ja, ist Ihre Struktur gut. Wenn die Überschriften dagegen springen, Lücken haben oder nichtssagend sind, wissen Sie genau, wo Sie nacharbeiten müssen. Noch schneller geht es mit einer Browser-Erweiterung wie HeadingsMap oder über den Accessibility-Baum in den Entwicklertools – beide zeigen Ihnen den Überschriften-Baum als Gliederung. Genau diese Gliederung hört auch ein blinder Mensch. Wenn sie für Sie keinen Sinn ergibt, ergibt sie auch für ihn keinen.

Häufige Fehler bei Überschriften

Über viele Audits hinweg wiederholen sich dieselben Fehler. Diese acht sehe ich am häufigsten – und alle lassen sich beheben:

• Keine H1 oder gleich mehrere H1 auf einer Seite.
• Logo als H1, sodass jede Seite dieselbe Überschrift trägt.
• Übersprungene Ebenen, etwa von H2 direkt zu H4.
• Leere Überschriften ohne jeden Text.
• Falsche Überschriften: gestyltes <p> statt echtem H-Tag.
• Vage Überschriften wie „Mehr“ oder „Weiterlesen“.
• Ebene nach Schriftgröße gewählt statt nach Struktur.
• Überschrift als Bild, deren Text niemand auslesen kann.

Auffällig ist dabei eines. Fast kein Fehler entsteht aus bösem Willen. Vielmehr entsteht er, weil nur auf das Aussehen geachtet wird – und die fehlende Struktur für Sehende unsichtbar bleibt. Wer einmal mit dem Screenreader durch die eigene Seite geht, bemerkt diese Lücken sofort.

Auch ein Vorteil für SEO und KI-Sichtbarkeit

Eine saubere Überschriftenstruktur zahlt sich doppelt aus. Denn dieselbe Gliederung, die Screenreader-Nutzern hilft, hilft auch Suchmaschinen. Google wertet Überschriften als inhaltliches Signal, wobei die H1 nach dem Seitentitel das größte Gewicht trägt. Eine Seite ohne H1 oder mit fünf davon sendet ein widersprüchliches Signal.

Noch wichtiger wird das bei KI-Systemen. Assistenten wie ChatGPT oder Perplexity und die KI-Übersichten in der Suche lesen den Überschriften-Baum als Gliederung einer Seite. Eine klare Gliederung wird so zu einer klaren Quelle, eine wirre Gliederung wird übersprungen. Gerade für die Sichtbarkeit in KI-Antworten ist ein sauberer Überschriften-Baum deshalb Gold wert.

Daraus folgt ein schöner Gleichklang. Was Sie für die Barrierefreiheit tun, verbessert zugleich Ihre Auffindbarkeit – im klassischen Ranking wie in der KI-Antwort. Wie beides zusammenhängt, vertiefe ich im Ratgeber zu Barrierefreiheit und SEO. Eine Investition in die Struktur ist damit zugleich eine Investition in Reichweite.

Häufige Fragen zur Überschriftenstruktur

Zum Abschluss die Fragen, die mir in der Praxis am häufigsten begegnen.

Wie viele H1 darf eine Seite haben?

Idealerweise genau eine. Denn die H1 benennt das Hauptthema der Seite. Mehrere H1 sind nicht zwingend ein Regelverstoß, stiften aber fast immer Verwirrung.

Darf ich Überschriften-Ebenen überspringen?

Nach unten besser nicht. Ein Sprung von H1 zu H3 bricht die Logik und wird von Prüfwerkzeugen gemeldet. Beim Schließen eines Unterabschnitts ist ein Rücksprung nach oben dagegen erlaubt.

Reicht es, eine Zeile fett und groß zu machen?

Nein. Optisch wirkt das wie eine Überschrift, im Code ist es keine. Nutzen Sie deshalb immer ein echtes H-Tag oder die Überschriften-Formatvorlage Ihres Editors. Diese eine Gewohnheit verhindert den mit Abstand häufigsten Strukturfehler.

So sichern Sie Ihre Überschriftenstruktur ab

Der Weg beginnt bei den messbaren Fehlern und endet bei der inhaltlichen Qualität. Einen schnellen Überblick liefert der kostenlose Access Score in Minuten. Er erkennt automatisch, was sich messen lässt: eine fehlende H1, mehrere H1, übersprungene Ebenen oder leere Überschriften.

Die eigentliche Qualität zeigt sich aber erst im Inhalt. Beschreiben die Überschriften wirklich den folgenden Abschnitt? Ergibt der Überschriften-Baum als Ganzes ein sinnvolles Bild? Das beurteilt kein Scanner allein. Unser Tiefen-Audit Access Ready prüft Ihre Struktur mit echten Nutzern assistiver Technik und stellt ein rechtssicheres Zertifikat aus.

Ansatz	Prüft Struktur	Prüft Sinn	Nachweis
Kostenloser Scanner	messbare Fehler	nein	nein
Overlay-Widget	kaschiert, behebt nicht	nein	nein
Access Ready (IFDB)	Struktur und Bedeutung	ja	ja

Der Unterschied liegt im Anspruch. Andere Anbieter prüfen, was sich leicht zählen lässt, und überlassen Ihnen den Rest. Wir prüfen, ob Ihre Überschriften für einen Menschen wirklich eine Landkarte ergeben. So wird aus „sieht aus wie eine Überschrift“ ein echtes „funktioniert für alle“. Und aus einer Seite, die nur schön aussieht, wird eine, die sich auch blind sicher bedienen lässt.