Überschriftenstruktur

Eine Überschrift ist kein großer Text. Sie ist eine semantische Auszeichnung und erklärt zweierlei zugleich: Hier beginnt ein Abschnitt, und dieser Abschnitt hängt an jenem anderen. Den Rang legt die Nummer des Elements fest, von h1 bis h6, und diese Nummer ist der einzige Teil, den Maschinen lesen.

Daraus entsteht die häufigste Verwechslung. Sichtbare Größe und semantischer Rang sind voneinander unabhängig: Ein Stylesheet kann ein h4 riesig und ein h2 zurückhaltend aussehen lassen. Wer das Element nach seinem Aussehen wählt, zerstört die Struktur, ohne dass etwas warnt.

Gegen drei Nachbarn gehört der Begriff abgegrenzt. Das title-Element ist der Titel des Dokuments und steht im Kopfbereich, außerhalb des Inhalts. Das Inhaltsverzeichnis ist eine Navigation, die aus den Überschriften gebaut wird, kein Ersatz für sie. Und Untertitel, Claim oder Vorspann sind keine Überschriften: Der Standard sieht vor, sie zusammen mit dem Titel in einem hgroup zu gruppieren, als Absatz.

Die Struktur im engeren Sinn ist die Liste aller Überschriften des Dokuments in ihrer Reihenfolge, mit ihrem Rang. Genau diese Liste geht durch, wer mit einem Screenreader navigiert.

Hier gehören drei Autoritäten auseinandergehalten, die Unterschiedliches sagen.

Der HTML-Standard. Er setzt zwei prüfbare Regeln. Hat ein Dokument Überschriften, sollte mindestens eine davon Rang 1 haben. Und jede Überschrift, die auf eine andere folgt, muss einen Rang haben, der kleiner, gleich oder höchstens um eins größer ist als der vorige, was den Sprung von h1 auf h3 ausschließt. Der Standard erlaubt außerdem mehrere Überschriften erster Ordnung in einem Dokument und zeigt das an einem Beispiel.

Die Richtlinien zur Barrierefreiheit. Das Kriterium zu Informationen und Beziehungen, Stufe A, verlangt, dass die visuell vermittelte Struktur programmatisch ermittelbar ist, und die dafür vorgesehene Technik bei Überschriften ist der Einsatz echter Elemente h1 bis h6. Das Kriterium zu Überschriften und Beschriftungen, Stufe AA, verlangt, dass sie Thema oder Zweck beschreiben. Keines von beiden schreibt eine bestimmte Hierarchie oder eine Anzahl von h1 vor.

Google. Der Leitfaden ist deutlich und widerspricht dem üblichen Rat: Überschriften in semantischer Reihenfolge sind hervorragend für Screenreader, aus Sicht der Suche spielt es aber keine Rolle, wenn sie in falscher Reihenfolge stehen. Ergänzt wird, dass es keine ideale Anzahl von Überschriften gibt, mit einer Faustregel: Wenn es dir zu viele scheinen, sind es das vermutlich auch.

<h1>Trailrunning-Schuh Kora Ridge</h1>
  <h2>Eigenschaften</h2>
    <h3>Sohle und Grip</h3>
    <h3>Dämpfung</h3>
  <h2>Größen und Umrechnung</h2>
  <h2>Kundenmeinungen</h2>

Was außerhalb dieser drei Quellen kursiert, ist Gewohnheit. Dass genau ein h1 pro Seite Pflicht sei, dass das Keyword ins h1 gehöre, dass h1 und title übereinstimmen müssten oder dass ein Rangsprung bestraft werde: Keine dieser Behauptungen steht in Googles Dokumentation oder in den Richtlinien zur Barrierefreiheit. Es sind vertretbare Praktiken ohne veröffentlichten Beleg.

Die erste Entscheidung, die davon abhängt, betrifft das Budget. Wer ein Audit verkauft, dessen Hauptergebnis das Umsortieren von Überschriftenrängen für bessere Positionen ist, verkauft etwas, dem Google schriftlich widerspricht. Dieser Aufwand hat aus einem anderen Grund Sinn, und man sollte ihn mit dem richtigen Grund begründen.

Dieser Grund heißt Barrierefreiheit, und dort ist die Wirkung gemessen. In der maßgeblichen Umfrage unter Menschen, die einen Screenreader nutzen (1.539 Antworten, erhoben im Dezember 2023 und Januar 2024), gaben 71,6 % an, auf einer langen Seite zuerst die Überschriften durchzugehen, und 88,8 % halten die Rangstufen für nützlich. Eine Seite, deren Überschriften Layoutblöcke sind, macht aus dieser Navigation Rauschen.

Die zweite Entscheidung ist redaktionell. Eine saubere Struktur zwingt zur Antwort, welche Abschnitte der Text wirklich hat, und deckt meist auf, dass zwei Kapitel dasselbe sagen oder dass jenes fehlt, das die Nutzerfrage beantwortet.

Die dritte betrifft das Risiko. Die Kriterien zur Barrierefreiheit, die Überschriften tatsächlich betreffen, liegen auf Stufe A und AA, also auf der Latte, die öffentliche Ausschreibungen und Konformitätsprüfungen üblicherweise ansetzen. Dort ist Struktur keine Ästhetik: Sie ist eine benannte Anforderung.

• Setze eine Überschrift nur dort, wo ein echter Abschnitt beginnt. Startet ein hervorgehobener Block keinen eigenen Inhalt, gib ihm mit p oder span ein Format und lass den Rang frei.
• Überspringe keine Ränge nach unten: Nach einem h2 kommen h2, h3 oder ein höherer Rang, niemals ein h4.
• Sorge für mindestens eine Überschrift ersten Ranges, die den Inhalt genau dieser Seite beschreibt, nicht die Marke und nicht die Kategorie.
• Formuliere Überschriften so, dass sie außerhalb des Zusammenhangs verständlich sind, denn genau so hört sie, wer von einer zur nächsten springt, ohne das Dazwischen zu lesen.
• Trenne Größe und Rang über CSS. Das Design bestimmt das Aussehen, der Rang die Einordnung.
• Gruppiere den Titel mit Untertitel oder Claim in einem hgroup, statt die Zusatzzeile zu einer Geisterüberschrift zu machen.

• Das Element nach seiner Bildschirmgröße wählen, mit h3 als Hervorhebung und h2 als Bildunterschrift.
• Den Slogan des Banners oder den Namen des Menüs als h1 auszeichnen, sodass der Seite eine beschreibende Überschrift ersten Ranges fehlt.
• Wiederkehrende Oberflächenelemente wie «Versandkostenfrei» oder den Preis jeder Kachel zu Überschriften machen: Die Liste, die der Screenreader durchgeht, füllt sich mit nutzlosen Einträgen.
• Von h1 auf h4 springen, weil das CMS-Template nur diese beiden Formate anbietet.
• Die ganze Hierarchie umbauen in der Erwartung eines Ranking-Effekts und hinterher jede Trafficschwankung als Beweis dafür ausgeben.