Überschriftenstruktur
Eine korrekte Überschriftenstruktur ordnet Inhalte einer Seite hierarchisch über die HTML-Elemente h1 bis h6 an, ohne Ebenen zu überspringen, und erlaubt es Screenreader-Nutzern, sich per Überschriften-Navigation einen Überblick über die Seite zu verschaffen.
Kurz erklärt
Überschriften bilden eine ineinander verschachtelte Gliederung: Eine <h1> steht für den Haupttitel der Seite, <h2>-Elemente für die wichtigsten Abschnitte darunter, <h3>-Elemente für Unterabschnitte davon, und so weiter. Screenreader bieten eine eigene Tastenkombination, um direkt von Überschrift zu Überschrift zu springen - viele erfahrene Screenreader-Nutzer verschaffen sich damit als Erstes einen Überblick über eine Seite, ähnlich wie sehende Nutzer eine Seite überfliegen. Ergänzend dazu gliedern HTML-Landmarks (<header>, <nav>, <main>, <aside>, <footer>) eine Seite in benannte Bereiche, zwischen denen ebenfalls direkt gesprungen werden kann - <main> etwa markiert den eigentlichen Seiteninhalt, wodurch sich wiederkehrende Elemente wie die Navigation überspringen lassen.
Beispiel
<header>…</header>
<nav>…</nav>
<main>
<h1>Barrierefreiheit im Web</h1>
<section>
<h2>Rechtliche Grundlagen</h2>
<h3>BFSG</h3>
<h3>BITV 2.0</h3>
</section>
<section>
<h2>Technische Standards</h2>
</section>
</main>
<footer>…</footer>Ein Screenreader-Nutzer kann hier per Landmark-Navigation direkt zu <main> springen und per Überschriften-Navigation sofort erkennen, dass die Seite zwei Hauptabschnitte hat, von denen der erste zwei Unterthemen behandelt.
Warum ist das relevant?
Eine korrekte Struktur ersetzt für Screenreader-Nutzer das, was sehende Nutzer durch Layout, Schriftgröße und visuelle Gruppierung ohnehin wahrnehmen. Fehlt sie oder ist sie inkonsistent, bleibt der eigentliche Seiteninhalt zwar technisch vorlesbar, aber ohne Struktur navigierbar - ein Nutzer müsste sich die gesamte Seite linear anhören, statt gezielt zu einem Abschnitt zu springen.
Häufige Missverständnisse
Überschriften-Ebenen werden häufig nach optischer Schriftgröße statt nach inhaltlicher Hierarchie vergeben - ein <h3>, das nur deshalb gewählt wird, weil es “die richtige Größe” hat, obwohl inhaltlich eine <h2> folgen müsste, überspringt die Hierarchie und verwirrt die Überschriften-Navigation. Umgekehrt werden Überschriften manchmal rein aus optischen Gründen verwendet - etwa ein fett gedruckter Zwischentitel als <h2>, der inhaltlich keine neue Gliederungsebene darstellt. Auch die Annahme, es dürfe nur eine einzige <h1> pro Seite geben, ist als striktes Gesetz falsch - HTML erlaubt mehrere, in der Praxis bleibt eine einzelne <h1> pro Seite dennoch die klarste und am besten unterstützte Konvention.