Überschriften sind eine Gliederung, keine Schriftgrößen

Stell dir ein Buch vor, das kein Inhaltsverzeichnis hat, keine Kapitelnummern, und dessen Zwischentitel mal groß und mal klein gesetzt sind, ohne jedes System. Du blätterst darin herum und findest nichts wieder. Ungefähr so geht es jemandem, der deine Website mit einem Screenreader liest und dabei auf Überschriften trifft, die nach Optik vergeben wurden statt nach Bedeutung.

Für unsere eigene Erhebung haben wir 14.984 Seiten kleiner und mittlerer Anbieter automatisiert geprüft, überwiegend Handwerk, Handel, Praxen und Vereine. 29,4 Prozent der 14.984 geprüften Seiten haben überhaupt keine Hauptüberschrift. Bei Shopware-Shops sind es 54 Prozent, also mehr als jede zweite Seite. Bei Shops liegt es meistens am Template. Der Produktname steht dort in einem gestalteten Textblock, der fett und 32 Pixel groß ist, technisch aber nur ein Absatz bleibt. Fürs Auge ist das die Überschrift. Für jede Software, die die Seite auswertet, existiert sie nicht.

Überschriften sind ein Baum, kein Stapel

Die sechs Ebenen von h1 bis h6 sind keine Größenstufen, sondern Ebenen einer Gliederung. Die h1 sagt, worum es auf dieser einen Seite geht, und zwar genau einmal. Jede h2 eröffnet einen Hauptabschnitt. Eine h3 gehört immer zu der h2, die über ihr steht, so wie 2.1 zu 2 gehört. Wenn du die Überschriften einer Seite untereinander schreibst und einrückst, muss ein brauchbares Inhaltsverzeichnis dabei herauskommen. Für eine Tischlerei sieht das so aus.

Tischlerei Musterberg in Mainz-Kastel (h1)
- Unsere Leistungen (h2)
  - Küchen nach Maß (h3)
  - Türen und Zargen (h3)
- Die Werkstatt (h2)
- Anfahrt und Öffnungszeiten (h2)

Fällt dir beim Einrücken auf, dass ein Punkt nirgends hineinpasst, dann ist selten die Überschrift schuld, sondern die Gliederung der Seite. Das ist die eigentliche Arbeit an der Sache, und sie dauert bei einer normalen Unterseite ungefähr fünf Minuten.

Wie ein Screenreader durch die Seite springt

NVDA und JAWS, die beiden verbreiteten Programme unter Windows, springen mit der Taste H zur nächsten Überschrift und mit Shift+H zurück zur vorherigen. Die Zifferntasten 1 bis 6 führen gezielt zur nächsten Überschrift dieser Ebene, mit 2 hangelt man sich also von Hauptabschnitt zu Hauptabschnitt. Einfg+F7 öffnet in NVDA eine Liste aller Überschriften der Seite, eingerückt nach Ebene. Auf dem Mac macht VoiceOver dasselbe über den Rotor mit VO+U. In den regelmäßigen WebAIM-Umfragen unter Screenreader-Nutzern stehen Überschriften seit Jahren an erster Stelle, wenn die Befragten angeben, wie sie sich auf einer langen Seite zurechtfinden.

Diese Liste entsteht ausschließlich aus den Tags h1 bis h6. Ein fett gesetzter Absatz taucht darin nicht auf, egal wie groß er gesetzt ist. Das gilt auch für nachrüstbare Werkzeuge wie unseres. Kontrast, Schriftgröße oder eine Vorlesefunktion lassen sich von außen ergänzen, eine fehlende Gliederung nicht, weil kein Programm erraten kann, welcher Absatz bei dir als Kapitelanfang gemeint war.

Das h3, das eigentlich nur kleiner aussehen sollte

Der häufigste Weg, auf dem eine Gliederung kaputtgeht, führt über den Editor. Du schreibst einen Abschnitt, wählst „Überschrift 2“, und der Text erscheint riesig. Also klickst du auf „Überschrift 3“, manchmal weiter auf 4, bis die Größe passt. Die Seite sieht danach ordentlich aus, und in ihrem Inneren steht eine Gliederung, die auf Ebene 3 beginnt oder in der alle Abschnitte unter einem Punkt hängen, den es gar nicht gibt. Wer sie hört, bekommt „Überschrift Ebene 3“ vorgelesen und hat keine Möglichkeit zu erkennen, worauf sich diese Ebene bezieht.

Das Gegenstück ist genauso verbreitet. Ein Satz soll hervorstechen, also wird er zur h2 gemacht, weil das Theme h2 hübsch setzt. In der Überschriftenliste steht danach ein Werbesatz mitten zwischen den echten Kapiteln, und wer die Liste zum Navigieren benutzt, muss ihn jedes Mal überlesen.

Bedeutung ins HTML, Größe ins CSS

Die Lösung ist unspektakulär und seit zwanzig Jahren dieselbe. Das Tag bestimmt die Ebene, das CSS bestimmt das Aussehen. So sieht eine typische Seite vorher aus, bei der nach Optik ausgewählt wurde.

<h1 class="hero">Tischlerei Musterberg in Mainz-Kastel</h1>
<h3>Unsere Leistungen</h3>
<h5>Küchen nach Maß</h5>
<h5>Türen und Zargen</h5>
<p class="gross-fett">Die Werkstatt</p>

Und so danach, mit derselben Optik, aber sauberer Gliederung.

<h1>Tischlerei Musterberg in Mainz-Kastel</h1>
<h2>Unsere Leistungen</h2>
<h3 class="ueberschrift-klein">Küchen nach Maß</h3>
<h3 class="ueberschrift-klein">Türen und Zargen</h3>
<h2>Die Werkstatt</h2>

Das passende CSS dazu ist kurz.

h1 { font-size: 2.5rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

.ueberschrift-klein {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

„Küchen nach Maß“ steht jetzt klein und in Versalien und ist trotzdem eine Überschrift dritter Ebene. Falls dein Baukasten keine eigenen Klassen erlaubt, hat er fast immer ein Feld für zusätzliches CSS in den Einstellungen. Dort reichen die vier Zeilen aus dem Beispiel.

Sprungebenen stören mehr, als man denkt

Eine Sprungebene entsteht, wenn nach einer h2 direkt eine h4 kommt und die h3 dazwischen fehlt. Am Bildschirm merkt das niemand, im Ohr schon. Nach „Überschrift Ebene 2, Unsere Leistungen“ folgt „Überschrift Ebene 4, Küchen nach Maß“, und wer so navigiert, deutet den Sprung als Hinweis darauf, einen Abschnitt überhört zu haben. Also geht er zurück und sucht etwas, das es nicht gibt.

Nach oben zu springen ist dagegen völlig normal. Auf eine h3 darf jederzeit wieder eine h2 folgen, damit endet der Unterabschnitt und der nächste Hauptabschnitt beginnt. Die Regel lautet nicht „keine Sprünge“, sondern „abwärts immer nur eine Ebene“.

Der Selbsttest in vier Schritten

Dafür brauchst du kein Zusatzprogramm, nur den Browser, den du ohnehin offen hast. Pro Seite dauert es unter zwei Minuten.

Öffne deine Startseite und drücke Strg+U, auf dem Mac in Chrome und Firefox Cmd+Alt+U. Der Quelltext öffnet sich in einem neuen Tab.
Drücke Strg+F und tippe <h1 ein. Der Browser zeigt dir die Zahl der Treffer an. Ein Treffer ist richtig. Null bedeutet, dass du zu den 29,4 Prozent gehörst, bei zwei oder mehr musst du dich für eine Hauptüberschrift entscheiden.
Wiederhole die Suche mit <h2, <h3 und <h4. Gibt es h3-Treffer, aber keinen einzigen h2-Treffer, fehlt eine Ebene. Such dabei immer mit Ziffer, denn die Suche nach <h allein zählt auch <html> und <head> mit.
Für die Reihenfolge drückst du auf der normalen Seite F12, auf dem Mac Cmd+Alt+I, wechselst auf den Reiter „Konsole“, fügst die Zeile unter dieser Liste ein und drückst Enter. Du bekommst alle Überschriften untereinander. Eine Folge wie 1, 2, 3, 3, 2, 3 ist gesund, eine Folge wie 1, 3, 5, 3 ist es nicht.

document.querySelectorAll('h1,h2,h3,h4,h5,h6')
  .forEach(h => console.log(h.tagName, h.textContent.trim()));

Der Umweg über die Konsole hilft außerdem bei Baukästen, die den Inhalt erst im Browser zusammensetzen. Im Quelltext steht bei solchen Seiten oft nur ein leeres Gerüst, die Konsole zeigt dagegen die Seite, die wirklich beim Besucher ankommt.

Wenn die Liste vor dir liegt, prüf noch eine Sache, die den meisten entgeht. Jede Zeile darin wird ohne den Text drumherum vorgelesen. „Mehr dazu“ oder „Das bieten wir“ hilft dann keinem weiter, „Anfahrt nach Mainz-Kastel“ dagegen schon. Bei der nächsten Seite, die du anlegst, fängst du am besten mit dieser Liste an und suchst die Schriftgrößen erst danach aus. In der Reihenfolge kostet dich die Sache keine zusätzliche Stunde, und deine Seite lässt sich am Ende auch von jemandem durcharbeiten, der sie nie zu sehen bekommt.