Überschriftenhierarchie

Die Überschriftenhierarchie beschreibt die logische Gliederung von Überschriften mithilfe der HTML-Elemente h1 bis h6. Sie ist essentiell für die Barrierefreiheit, da sie Nutzenden von Screenreadern die Navigation und Orientierung erleichtert und die inhaltliche Struktur einer Seite vermittelt. Mit NVDA etwa über NVDA + F7. Mit der Taste H springt man zur nächsten Überschrift, mit den Zifferntasten 1 bis 6 gezielt auf eine Ebene. So überfliegen Nutzende eine Seite, statt sie von vorn zu lesen. Ähnlich wie Sehende, nur über die Struktur statt über das Layout.

Grundregeln:

• Eine h1 pro Seite. Sie benennt das Thema der Seite — mehrere machen unklar, worum es geht

• Keine Ebenen auslassen, also nicht von h2 direkt auf h4

• Überschriften nach ihrer Bedeutung wählen, nicht nach ihrem Aussehen

• Jede Überschrift beschreibt den Abschnitt, den sie einleitet

• Keine leeren Überschriften

Die häufigsten Fehler:

• Überschrift nach Größe gewählt. In Redaktionssystemen wird h4 ausgewählt, weil h2 zu groß aussieht. Die Ebene folgt aber der Struktur, nicht der Optik. Für die Darstellung gibt es CSS-Klassen. Wo Redaktionen regelmäßig davon abweichen, ist meist die Gestaltung der Ebenen das eigentliche Problem.

• Fettschrift als Ersatz. Ein fett formatierter Absatz sieht aus wie eine Überschrift, taucht in der Überschriftenliste aber nicht auf. Für Screenreader-Nutzende existiert dieser Abschnitt schlicht nicht.

Testing der Hierarchie:

• Mit Screenreader testen

• 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.