Inhalte mit H1 bis H6 gliedern
Überschriften sind HTML-Elemente von <h1> bis <h6>, die den Inhalt einer Webseite in Abschnitte gliedern. Ihr Text benennt das Thema, ihre Ebene zeigt die Einordnung innerhalb der Seite. So können Leser einen Abschnitt beim Überfliegen finden oder mit einem Screenreader gezielt dorthin springen.
Ein vereinfachtes Beispiel:
<h1>Hauptüberschrift der Seite</h1>
<h2>Unterabschnitt</h2>
<h3>Detailabschnitt</h3>
Die Zahl steht für die Ebene: H1 ist die oberste, H6 die tiefste. Wähle die Ebene nach dem Aufbau des Inhalts. Schriftgröße, Abstände und Farbe stellst du mit CSS ein.
Eine nachvollziehbare Hierarchie
Unterthemen erhalten eine Ebene unter der zugehörigen Überschrift. Ein schematisches Beispiel:
H1: Hauptthema der Seite
H2: Erstes Unterthema
H3: Detail zum ersten Unterthema
H3: Weiteres Detail
H2: Zweites Unterthema
H3: Detail zum zweiten Unterthema
H4: Vertiefung
H2: Drittes Unterthema
Vermeide beim Öffnen eines Unterabschnitts nach Möglichkeit einen Sprung von H2 direkt zu H4. Er lässt offen, wo die dazwischenliegende Ebene bleibt. Beim Abschließen eines Unterabschnitts ist dagegen ein Wechsel von H4 zurück zu H2 sinnvoll: Dort beginnt das nächste Hauptunterthema. Für wiederkehrende Bereiche wie eine Seitenleiste kann eine über Seiten hinweg gleichbleibende Ebene wichtiger sein als die unmittelbar vorhergehende Überschrift. Diese Fälle unterscheidet das W3C-Tutorial zu Überschriften.
Eine H1 für das Hauptthema ist eine redaktionelle Empfehlung. Mehrere H1-Elemente oder eine übersprungene Ebene sind für sich allein kein Beleg, dass ein WCAG-Kriterium verletzt ist. Prüfe, ob die gewählten Ebenen die Beziehungen der Abschnitte wiedergeben. Die W3C-Technik H42 zeigt, wie HTML-Überschriften diese Struktur vermitteln.
Überschriften und Barrierefreiheit
Für Barrierefreiheit zählen sowohl der Text als auch die Auszeichnung im HTML. WCAG 1.3.1 auf Stufe A verlangt, dass visuell vermittelte Struktur und Beziehungen auch durch Software erkennbar oder als Text verfügbar sind. Ein nur größer und fett formatierter Absatz liefert noch keine HTML-Überschrift.
WCAG 2.4.6 auf Stufe AA verlangt, dass vorhandene Überschriften Thema oder Zweck beschreiben. „Versandkosten und Lieferzeiten“ hilft bei der Orientierung mehr als „Weitere Infos“. Eine leere Überschrift liefert kein Thema. Wenn ein Editor versehentlich ein leeres <h2> erzeugt, entferne es oder ergänze die fehlende Abschnittsüberschrift.
Screenreader können Überschriften in einer Liste anzeigen oder mit eigenen Tastaturbefehlen anspringen. Die Tab-Taste im Browser bewegt dagegen normalerweise den Fokus zwischen bedienbaren Elementen wie Links und Formularfeldern. Eine Überschrift gehört nicht automatisch in diese Tab-Reihenfolge. Ergänze deshalb kein tabindex="0" an jeder Überschrift, um sie „erreichbar“ zu machen. Die W3C-Hinweise zur Tastaturschnittstelle beschreiben diese Fokusnavigation; der Artikel zur Tastaturbedienung zeigt passende Prüfungen und Sprunglinks.
H1, Meta Title und Suchergebnisse
Eine klare Hauptüberschrift hilft Lesern, das Thema einer Seite zu erkennen. Google kann sie neben anderen Quellen für den Titellink im Suchergebnis verwenden. Wenn mehrere große Überschriften gleich auffällig sind, kann die Hauptüberschrift schwerer zu bestimmen sein. Google empfiehlt deshalb einen erkennbaren Seitentitel. Daraus ergibt sich keine Rankinggarantie für eine bestimmte Anzahl von H1-Elementen. Quelle: Google zu Titellinks
Stimme die H1 mit dem Meta Title und dem Inhalt ab. Beide dürfen gleich formuliert sein. Eine H1 hat keine allgemeine Grenze von 70 Zeichen; entscheidend sind Verständlichkeit und die Darstellung auf der Seite.
Ein erfundenes Beispiel für unterschiedliche, aber passende Formulierungen:
- Meta Title: „Local SEO für eine Zahnarztpraxis | Musteragentur“
- H1: „Local SEO für deine Zahnarztpraxis“
Benutze die Begriffe, nach denen deine Leser suchen, wenn sie den Abschnitt treffend beschreiben. Wiederhole ein Keyword nicht mechanisch in jeder Überschrift. Eine Frage als Überschrift passt, wenn der Abschnitt genau diese Frage beantwortet; eine Auswahl als Suchergebnis oder KI-Antwort folgt daraus nicht automatisch.
Die Gliederung prüfen
Lies nur die Überschriften der Seite. Erkennst du das Thema und die Abfolge der Abschnitte? Vergleiche danach die sichtbare Gliederung mit H1 bis H6 im HTML. Prüfe auch wiederkehrende Elemente wie Logo, Navigation und Seitenleiste, damit sie im Inhaltsverzeichnis eines Screenreaders sinnvoll eingeordnet bleiben.
Automatisierte Hinweise auf leere Überschriften oder übersprungene Ebenen helfen bei dieser Suche. Ob eine Gliederung inhaltlich passt, musst du am Text beurteilen. Den Umfang der automatisierten Prüfung beschreibt der Barrierefreiheits-Check.