Eine Überschriftenhierarchie ist die logische Gliederung von Inhalten durch HTML-Überschriften (h1 bis h6). Sie ist fundamental für die Barrierefreiheit, da sie Screenreader-Nutzenden die Navigation und Orientierung ermöglicht und die inhaltliche Struktur einer Seite vermittelt.
Grundregeln der Überschriftenhierarchie:
Eine
h1pro Seite als HauptüberschriftKeine Ebenen überspringen (z.B. von h2 auf h4)
Logische Verschachtelung
Überschriften nach Bedeutung – nicht nach Aussehen
Keine leeren Überschriften
Ein korrektes Beispiel:
<h1>Produktname</h1>
<h2>Produktbeschreibung</h2>
<h3>Technische Details</h3>
<h3>Lieferumfang</h3>
<h2>Kundenrezensionen</h2>
Für die Entwicklung bedeutet dies:
Dokumentenstruktur vorab planen
Semantisch korrektes HTML verwenden
Styling von Struktur trennen
Screenreader-Tests durchführen
Testing der Hierarchie:
Mit Screenreader testen
Navigationstests durchführen
Logische Struktur verifizieren
Vollständigkeit kontrollieren
Die korrekte Überschriftenhierarchie ist nicht nur für die Barrierefreiheit wichtig – sie verbessert auch die allgemeine Nutzerführung, Wartbarkeit und Suchmaschinenoptimierung einer Website.
