1. Kurz aufgefrischt: Was H1 bis H6 technisch bedeuten
Überschriften sind auch ein Gestaltungsmittel – vor allem aber das Inhaltsverzeichnis einer Seite. Beides gehört zusammen, nur nicht in beliebiger Reihenfolge: Welche Ebene eine Überschrift hat, ergibt sich aus dem Inhalt. Wie diese Ebene aussieht, ist im Design bereits festgelegt.
Eine als H2 ausgezeichnete Zeile sagt dem Browser, dem Screenreader und der Suchmaschine, dass hier ein Abschnitt einer bestimmten Ebene beginnt. Genau das meint “semantisch” – die Bedeutung steckt in der Auszeichnung, nicht im Aussehen.
Die Ebenen bauen aufeinander auf, wie die Gliederung eines Buches:
- H1 – das Hauptthema der Seite, genau einmal
- H2 – die großen Abschnitte
- H3 – Unterabschnitte innerhalb eines H2
- H4 und H5 – nur bei tatsächlich tiefer Inhaltsstruktur
Ein Beispiel: H1 Leistungen · H2 Planung · H3 Entwurf · H3 Genehmigung · H2 Bauleitung
Mehr als drei Ebenen braucht es in der Praxis selten. Und wirkt eine Überschrift im Layout “zu groß”, ist das eine Designfrage – keine Strukturfrage.
2. Welche Ebene wann richtig ist
In der Praxis braucht eine Seite selten mehr als drei Ebenen. H4 und H5 sind nur bei tatsächlich tiefer Inhaltsstruktur sinnvoll – etwa in umfangreichen Fachtexten oder Dokumentationen. Wer regelmäßig auf H5 kommt, sollte prüfen, ob der Inhalt nicht besser auf mehrere Seiten gehört.
Bei der H1 ist die Lage eindeutig: eine pro Seite. Sie benennt das Hauptthema, und mehrere Hauptthemen kann eine Seite nicht haben. In der Praxis entsteht die zweite meist unbeabsichtigt – etwa wenn ein Element im Seitenkopf bereits eine ausgibt und im Text eine weitere gesetzt wird.
Eine übersprungene Ebene wiederum verstößt nicht zwingend gegen 1.3.1, solange die Beziehungen technisch auslesbar bleiben. In der Prüfpraxis wird sie trotzdem als Mangel gewertet, weil sie die Orientierung erschwert. Der Aufwand, sie zu vermeiden, ist minimal – die Diskussion darüber kostet mehr.
3. Sonderfälle und Prüfung
Auch Überschriften außerhalb des Fließtextes erscheinen in der Überschriftenliste des Screenreaders – in Teaserkacheln, in Footer-Spalten oder in einem Megamenü. Teaserkacheln sind der häufigste Fall: Gibt jede Kachel eine H2 aus, konkurriert sie mit den inhaltlichen Abschnitten. Meist ist H3 die passende Ebene – oder gar keine Überschrift, sondern ein verlinkter Text.
Ob das eigene Backend zum Problem beiträgt, zeigt ein einfaches Indiz: Wenn die Redaktion eine H3 auf H2 stellt, weil die Überschrift größer werden soll, gibt es keinen anderen Weg zur gewünschten Darstellung. Dann fehlt ein zweites Feld, über das sich die Größe unabhängig von der Ebene wählen lässt – siehe Stellschraube 3 weiter oben.
Für die Kontrolle genügen Browser-Erweiterungen wie HeadingsMap oder die Struktur-Ansichten gängiger Accessibility-Tools. Sie zeigen die Gliederung einer Seite auf einen Blick.
