Überschriften-Struktur prüfen.
Eine klare Hierarchie von H1 bis H6 ist das Gerüst, an dem sich Menschen mit Screenreader durch deine Seite bewegen. Nach WCAG 2.1 AA ist sie Pflicht. Hier erfährst du, warum die Struktur zählt, wie du übersprungene Ebenen und fehlende H1 findest und wie du sie schnell behebst.
Überschriften-Checker
Füg den HTML-Code einer Seite ein. Der Checker zeigt dir die Gliederung von H1 bis H6 und markiert Fehler, die Menschen mit Screenreader die Orientierung erschweren.
So geht’s: Öffne die Seite im Browser und drück Strg+U (Mac: Wahltaste+Cmd+U), dann siehst du den Quelltext. Markiere alles, kopiere es und füge es hier ein. Der Code bleibt in deinem Browser.
Was ist eine barrierefreie Überschriften-Struktur?
Überschriften (im Code die Tags H1 bis H6) gliedern eine Seite in eine Hierarchie: eine H1 als Titel, darunter H2 für die Hauptabschnitte, H3 für Unterpunkte und so weiter. Screenreader lesen diese Gliederung wie ein Inhaltsverzeichnis. Wer einen Screenreader nutzt, springt von Überschrift zu Überschrift, um eine Seite zu erfassen, statt sich alles vorlesen zu lassen.
Eine logische Überschriften-Struktur fällt unter WCAG 2.1 Erfolgskriterium 1.3.1 „Info und Beziehungen“ (Level A) und ist damit Teil der BFSG-Anforderungen. Springt die Hierarchie, etwa von einer H2 direkt zu einer H4, oder fehlt die H1, verlieren Menschen mit Screenreader die Orientierung. Beides gehört zu den häufigsten Struktur-Fehlern im Web.
Wie prüfe ich die Überschriften-Struktur meiner Website?
Verschaff dir zuerst einen Überblick über die Hierarchie. Prüf dann, ob sie logisch ist. Dafür gibt es drei Wege, die sich ergänzen:
- 01
Struktur im Browser sichtbar machen
Mit dem Überschriften-Checker oben auf dieser Seite, den Entwicklertools oder einer Outline-Erweiterung wie HeadingsMap zeigst du die Gliederung einer Seite als Baum an. So erkennst du fehlende H1 oder übersprungene Ebenen auf einen Blick, allerdings immer nur Seite für Seite.
- 02
Automatischer Scanner
Ein Tool prüft alle Seiten automatisch auf fehlende H1, übersprungene Ebenen und leere Überschriften. Das geht schnell und erfasst die ganze Website. Deshalb eignet sich ein Scanner für die laufende Kontrolle nach jeder Änderung.
- 03
Screenreader-Test
Schalte einen Screenreader ein (zum Beispiel NVDA oder VoiceOver) und navigiere per Überschriften-Kurzbefehl durch die Seite. So hörst du, ob die Reihenfolge logisch ist und jede Überschrift ihren Abschnitt sinnvoll benennt.
Struktur auf deiner Website prüfen?
Prüf deine Website kostenlos. Der erste Scan zeigt dir, wie viele Barrieren sie hat, auch bei den Überschriften.
Was eine gute Überschriften-Struktur ausmacht
Eine saubere Überschriften-Hierarchie folgt diesen vier Regeln:
Genau eine H1 pro Seite
Die H1 benennt das Hauptthema der Seite, wie eine Kapitelüberschrift. Pro Seite gehört genau eine H1, nicht keine und nicht mehrere.
Keine Ebene überspringen
Nach einer H2 folgt eine H3, nicht direkt eine H4. Übersprungene Ebenen unterbrechen die logische Verschachtelung, an der sich Menschen mit Screenreader orientieren.
Überschriften beschreiben den Abschnitt
Jede Überschrift sagt konkret, was im folgenden Abschnitt steht. Leere oder rein dekorative Überschriften verwirren mehr, als sie helfen.
Nicht fürs Aussehen zweckentfremden
Überschriften-Tags gliedern die Seite, für große Schrift sind sie nicht gedacht. Wer Text nur optisch hervorheben will, nutzt dafür CSS.
Überschriften-Struktur mit site-check prüfen
site-check scannt alle Seiten deiner Website und findet Struktur-Fehler automatisch: fehlende oder mehrfache H1, übersprungene Ebenen und leere Überschriften. Jeder Fund steht mit seiner Einordnung im Report nach WCAG 2.1 AA, samt der genauen Stelle auf der Seite.
Zu jedem Fund bekommst du eine Empfehlung, wie du ihn behebst. Wo sich ein Fehler eindeutig automatisch lösen lässt, schlägt site-check den Fix direkt vor. Du kannst ihn annehmen, anpassen oder verwerfen. Die KI liefert die Idee, die Kontrolle bleibt bei dir. site-check wird in der EU gehostet und verarbeitet die Daten DSGVO-konform.
Struktur-Fehler automatisch finden
Prüf deine Website kostenlos. Im 14-tägigen Test siehst du jede Seite, auf der Überschriften fehlen, doppelt sind oder springen.
Häufige Fragen zur Überschriften-Struktur
Den Überblick über die Hierarchie einer einzelnen Seite bekommst du mit dem Überschriften-Checker auf dieser Seite, den Entwicklertools deines Browsers oder einer Outline-Erweiterung. Für die ganze Website ist ein automatischer Scanner schneller. Er findet fehlende H1, übersprungene Ebenen und leere Überschriften über alle Seiten hinweg. site-check macht das in einem Durchlauf.
Genau eine. Die H1 benennt das Hauptthema der Seite. Ohne H1 fehlt Menschen mit Screenreader der Einstieg, mehrere H1 verwässern die Struktur. Alle weiteren Abschnitte werden mit H2 bis H6 logisch darunter verschachtelt.
Wer einen Screenreader nutzt, springt per Kurzbefehl von Überschrift zu Überschrift, um eine Seite zu überfliegen. Sehende machen dasselbe mit den Augen. Dafür braucht es eine logische Hierarchie von H1 bis H6. Fehlt sie oder springt sie, geht die Orientierung verloren.
Ja. Eine korrekte Struktur fällt unter WCAG 2.1 Kriterium 1.3.1 „Info und Beziehungen“ (Level A) und ist damit Teil der BFSG-Anforderungen. Übersprungene Ebenen und fehlende H1 gehören zu den häufigsten Struktur-Barrieren im Web.
Ja. site-check scannt alle Seiten auf fehlende oder mehrfache H1, übersprungene Ebenen und leere Überschriften. Jede Fundstelle steht im Report nach WCAG 2.1 AA. Zu vielen Funden gibt es eine konkrete Empfehlung, wie du sie behebst.
Passende Ratgeber
Farbkontrast prüfen
Welche Mindestwerte gelten und wie du das Kontrastverhältnis misst.
Reicht ein Barrierefreiheits-Widget?
Warum ein Widget Barrieren überdeckt, statt sie zu beheben.
Was ist ein Inlay?
Korrekturen, die im HTML deiner Seite stehen, statt im Browser darüber zu liegen.
Bereit, deine Struktur zu prüfen?
Prüf deine Website kostenlos. Der erste Scan zeigt dir, wie viele Barrieren sie nach WCAG 2.1 AA hat. Im 14-tägigen Test siehst du dann jeden Fund samt Vorschlag.