Überschriften-Struktur: Ebenen sauber gliedern statt überspringen

Die Überschriften Ihrer Seite folgen keiner sauberen Rangfolge — es werden Ebenen übersprungen, sind leer, oder es fehlt eine h1. Für Vorlese-Software wird die Gliederung dadurch schwer nachvollziehbar. EverAudit prüft die Heading-Struktur gegen WCAG 1.3.1 (Info and Relationships) und 2.4.6 (Headings and Labels) und meldet Verstöße als Befund.

Was ist das Problem?#

Überschriften (<h1> bis <h6>) bilden das Inhaltsverzeichnis einer Seite für Screenreader-Nutzer. Diese Gliederung funktioniert nur, wenn drei Grundregeln eingehalten werden: Erstens gibt es genau eine <h1> pro Seite, die das Hauptthema benennt. Zweitens steigen die Ebenen immer um genau eins — nach einer h2 folgt eine h3, nie direkt eine h4. Drittens enthält jede Überschrift tatsächlich Text; ein leeres Heading-Element erzeugt eine Lücke in der Gliederung.

Häufigste Ursache für übersprungene Ebenen: Ein Redakteur wählt eine Überschriftenebene wegen ihrer optischen Größe, nicht wegen ihrer semantischen Position — eine h4 wird genutzt, weil sie „klein genug" aussieht, obwohl im Dokument bislang nur h1 und h2 vorkommen.

Warum prüft EverAudit das?#

heading-order, empty-heading und page-has-heading-one werden als prio2-Befund geführt: Sie blockieren keine Funktion, verschlechtern aber die Navigierbarkeit erheblich für Screenreader-Nutzer, die sich gezielt von Überschrift zu Überschrift bewegen. Weil Heading-Fehler häufig aus CMS-Freitextfeldern stammen — ein Redakteur wählt frei, welche Ebene er einfügt —, treten sie oft seitenspezifisch auf, nicht zentral im Template.

Welche Auswirkung hat das?#

Menschen, die sich per Vorlese-Software an Überschriften orientieren, verlieren den Überblick über Ihre Inhalte — sie können nicht mehr zuverlässig einschätzen, wie ein Abschnitt zum Ganzen steht. Fehlt die h1 komplett, fehlt Besuchern und Suchmaschinen zudem die zentrale Aussage, worum es auf der Seite geht — das schwächt sowohl die Orientierung als auch klassische On-Page-SEO-Signale.

Wie beheben Sie fehlerhafte Überschriften-Strukturen?#

Korrigieren Sie die semantische Ebene im Markup, nicht die visuelle Größe im CSS:

<!-- fehlerhaft: h1 → h3, Ebene übersprungen -->
<h1>Produktkategorie: Bürostühle</h1>
<h3>Ergonomische Merkmale</h3>

<!-- korrigiert: lückenlose Rangfolge -->
<h1>Produktkategorie: Bürostühle</h1>
<h2>Ergonomische Merkmale</h2>

Visuelle Größe unabhängig von der semantischen Ebene steuern:

/* h3 darf optisch größer wirken als h2, wenn das gewollt ist */
h3.section-title {
  font-size: var(--text-2xl);
}

Leere Überschriften entweder befüllen oder entfernen:

<!-- CMS-Feld war leer, Template rendert trotzdem ein h2 -->
<h2></h2>

<!-- korrigiert: entweder Text ergänzen … -->
<h2>Kundenstimmen</h2>

<!-- … oder das Element weglassen, wenn kein Titel nötig ist -->

Konkretes Vorgehen:

1. Gliederung als Baum denken — vor dem Schreiben skizzieren, welche Ebene welchem Abschnitt zusteht, unabhängig vom gewünschten Aussehen.
2. Genau eine h1 pro Seite — sie beschreibt das zentrale Thema, meist identisch mit dem sichtbaren Seitentitel.
3. Keine Ebene überspringen — von h2 direkt zu h4 ist ebenso fehlerhaft wie von h1 zu h3.
4. Leere Heading-Elemente vermeiden — Template so bauen, dass ein leeres CMS-Feld kein leeres <h2> rendert.
5. CMS-Redakteure schulen, Heading-Ebenen nach Struktur zu wählen, nicht nach optischer Größe — Design-Vorgaben fürs Styling separat bereitstellen.

Selbst ausprobieren#

Überschriften-Struktur ordnen

Bringen Sie die Überschriften der Beispielseite in eine saubere Struktur — Reihenfolge und Ebene.

1. H3Gesetzliche Grundlagen
2. H2Barrierefreiheit im Web
3. H1Was bedeutet Barrierefreiheit?
4. H2Vorteile für alle Nutzenden
5. H2Erste Schritte

Noch 1 Punkt zu verbessern:

• Die H1 steht nicht an erster Stelle — die Hauptüberschrift muss die erste Überschrift der Seite sein.

Fazit#

Eine saubere Heading-Struktur kostet keinen Gestaltungsspielraum — die visuelle Größe bleibt frei im CSS steuerbar, solange die semantische Ebene im Markup der tatsächlichen Dokumentgliederung folgt. Das lohnt sich doppelt: für Screenreader-Navigation und für die inhaltliche Struktur, die auch Suchmaschinen zugutekommt.