Wie Überschriften eine Seite gliedern

Überschriften von h1 bis h6 bilden das Inhaltsverzeichnis einer Seite. Wer einen Screenreader nutzt, springt damit von Abschnitt zu Abschnitt, statt alles anzuhören.

So funktioniert es

HTML kennt sechs Ebenen von Überschriften, h1 bis h6. Zusammen ergeben sie eine Gliederung wie in einem Buch: Die h1 ist der Titel der Seite, h2 sind die Kapitel, h3 die Abschnitte darin.

Sehende überfliegen eine Seite und erkennen Überschriften an Größe und Schrift. Wer einen Screenreader nutzt, bekommt diese Übersicht über die Auszeichnung: Mit einer Taste springt er zur nächsten Überschrift, mit einer anderen zur nächsten h2, oder er lässt sich eine Liste aller Überschriften zeigen. Fehlt die Gliederung, bleibt nur, die Seite von oben bis unten anzuhören.

WCAG 2.2 verlangt, dass Struktur, die man sieht, auch im Code steckt (Kriterium 1.3.1), und dass Überschriften beschreiben, was folgt (2.4.6).

Worauf es ankommt

  • Überhaupt Überschriften. Eine Seite ohne einzige Überschrift lässt sich nicht überblicken. Fetter Text in einem div sieht aus wie eine Überschrift, ist aber keine.
  • Eine h1, die sagt, worum es geht. Meist ist das der sichtbare Titel des Inhalts, nicht das Logo.
  • Keine übersprungenen Ebenen. Auf eine h2 folgt eine h3, nicht gleich eine h4. Wer per Überschrift navigiert, vermutet sonst einen fehlenden Abschnitt. Zurück nach oben darf es springen: Nach einer h4 kann die nächste h2 kommen.
  • Kein leerer Inhalt. Eine Überschrift ohne Text, etwa nur mit einem Icon, wird als leere Überschrift angesagt.
  • Ebene nach Bedeutung, nicht nach Größe. Soll eine h3 größer aussehen, regelt das CSS. Umgekehrt ist nicht jeder groß gesetzte Satz eine Überschrift.

So richtest du es ein

Im Editor deines CMS wählst du die Ebene beim Absatzformat oder im Überschriften-Block, nicht über Schriftgröße und Fettdruck. Die festen Überschriften der Seite, etwa im Kopf, in der Seitenleiste oder im Fuß, kommen aus dem Theme. Dort liegt oft das Problem: Widget-Titel als h2 oder h4 ohne Zusammenhang, oder das Logo als h1 auf jeder Seite. Das ändert, wer das Theme pflegt, meist deine Agentur. Der Report zeigt die Gliederung der Seite; lies sie wie ein Inhaltsverzeichnis.

Mehr zu Struktur und Sprache

Jetzt deine Website prüfen

Die Prüfung zeigt, wo deine Seite Menschen mit Einschränkungen aussperrt.

Website prüfen