Überschriftenstruktur: klare Gliederung mit h1–h6
Also called: Überschriftenhierarchie, Überschriftenebenen, Dokumentgliederung
Definition
Die Überschriftenstruktur ist die Gliederung, die eine Seite durch ihre Elemente h1 bis h6 bildet. Jede Überschrift leitet einen Abschnitt ein, ihre Ebene zeigt, wo dieser Abschnitt in der Hierarchie steht.
Die Überschriftenstruktur ist die Gliederung, die Ihre Seite mit den Elementen <h1> bis <h6> aufbaut. Sehende erkennen große, fette Titel und erfassen den Aufbau in Sekunden. Wer einen Screenreader nutzt, bekommt denselben Überblick nur, wenn diese Titel echte Überschriften sind – dann lassen sie sich auflisten und per Tastendruck ansteuern.
Was es bedeutet
WCAG 1.3.1 Info und Beziehungen (Stufe A, WCAG 2.2) verlangt, dass visuell vermittelte Struktur programmatisch ermittelbar ist. Das W3C nennt Überschriften als typischen Fall: Text, der durch größere, fette Schrift wie eine Überschrift wirkt, muss auch als solche ausgezeichnet sein. Hinreichende Techniken sind H42 (h1–h6 verwenden) und ARIA12 (role="heading" mit aria-level). Der Fehler F2 beschreibt das Gegenteil: Struktur nur über Textformatierung zu vermitteln.
Zwei weitere Kriterien gehören dazu: 2.4.6 Überschriften und Beschriftungen (Stufe AA) verlangt aussagekräftige Überschriften, 2.4.10 Abschnittsüberschriften (Stufe AAA), dass Inhalte überhaupt mit Überschriften gegliedert sind. Die empfohlene Technik G141 rät zu korrekt verschachtelten Ebenen.
| Ebene | Typischer Einsatz |
|---|---|
| h1 | Hauptthema der Seite – meist eine pro Seite |
| h2 | Hauptabschnitte („Preise“, „So funktioniert es“) |
| h3 | Unterabschnitte innerhalb eines h2 |
| h4–h6 | Tiefere Ebenen, auf Marketingseiten selten |
| Fetter Absatz im Überschriften-Look | Für assistive Technologie keine Überschrift – kann 1.3.1 verletzen |
Überschriften arbeiten mit ARIA-Landmarks zusammen: Landmarks markieren die Bereiche einer Seite (Kopf, Navigation, Hauptinhalt), Überschriften gliedern den Inhalt darin.
Praxisbeispiele
<!-- Gut: ein h1, verschachtelte Abschnitte -->
<h1>Gartenmöbel</h1>
<h2>Lounge-Sets</h2>
<h3>Teakholz</h3>
<h3>Aluminium</h3>
<h2>Pflege und Reinigung</h2>
<!-- Schlecht: sieht aus wie eine Überschrift, ist aber keine -->
<p class="gross-fett">Lieferzeiten</p>
<!-- Schlecht: Überschrift nur für große Schrift -->
<h2>Gratisversand ab 50 €!</h2>Beginnen Sie mit einem h1, das die Seite benennt, nutzen Sie h2 für Hauptabschnitte und h3 für deren Unterabschnitte. Formulieren Sie Überschriften, die sagen, was folgt („Lieferzeiten nach Österreich“). Halten Sie das Muster auf allen Vorlagen gleich.
Täuschen Sie keine Überschriften mit fetten Absätzen vor, setzen Sie Überschriften-Tags nicht nur für große Schrift ein, packen Sie kein Logo und kein ganzes Banner in ein h1 und lassen Sie keine Abschnitte ohne Überschrift.
So prüfen Sie die Überschriftenstruktur
Häufige Fragen
Wie viele h1-Überschriften sollte eine Seite haben?
WCAG schreibt keine Anzahl vor. Ein h1, das das Hauptthema der Seite nennt, ist das klarste Muster und das, was die meisten Screenreader-Nutzer erwarten – deshalb die übliche Empfehlung.
Ist eine übersprungene Überschriftenebene ein WCAG-Verstoß?
Nicht für sich allein. Das W3C führt übersprungene Ebenen nicht als Fehler von 1.3.1, empfiehlt aber verschachtelte Ebenen, weil Lücken bei der Navigation über Überschriften verwirren. Zum echten Problem wird es, wenn die Ebenen der sichtbaren Struktur widersprechen.
Sind Überschriften wichtig für SEO?
Überschriften helfen Suchmaschinen zu verstehen, worum es in einem Abschnitt geht – ähnlich wie Screenreader-Nutzern. Eine klare Überschriftenstruktur dient beiden, mit Keywords vollgestopfte Überschriften keinem.
Wie nutzen Screenreader-Nutzer Überschriften?
Viele lassen sich zuerst alle Überschriften auflisten oder springen mit der Taste H von einer zur nächsten und lesen nur den Abschnitt, den sie brauchen. Ohne echte Überschriften müssen sie die Seite von oben anhören. Ein Skip-Link und Landmarks bieten weitere Abkürzungen.
Related terms
Übersprungene Überschriftenebene: einfach erklärt
Eine übersprungene Überschriftenebene ist ein Sprung um mehr als eine Stufe nach unten in der Überschriften-Hierarchie, etwa von h2 direkt zu h4. Wer per Screenreader über Überschriften navigiert, vermutet dann einen fehlenden Abschnitt.
Read definition: Übersprungene Überschriftenebene: einfach erklärtARIA-Landmarks: Seitenbereiche für Screenreader
ARIA-Landmarks sind Rollen wie banner, navigation, main und contentinfo, die die großen Bereiche einer Seite kennzeichnen. Screenreader listen sie auf, sodass Nutzer direkt zu jedem Bereich springen können.
Read definition: ARIA-Landmarks: Seitenbereiche für ScreenreaderScreenreader: So lesen blinde Menschen Websites
Ein Screenreader ist eine assistive Software, die Inhalte und Bedienelemente des Bildschirms vorliest oder auf einer Braillezeile ausgibt. Er ist auf die Namen, Rollen und Zustände angewiesen, die eine Website über den Barrierefreiheitsbaum des Browsers bereitstellt.
Read definition: Screenreader: So lesen blinde Menschen WebsitesSkip-Link: Direkt zum Hauptinhalt springen
Ein Skip-Link ist ein Link ganz oben auf der Seite, der direkt zum Hauptinhalt springt. So müssen Tastatur- und Screenreader-Nutzer nicht auf jeder Seite das ganze Menü durchlaufen. Er ist eine ausreichende Technik für WCAG 2.4.1.
Read definition: Skip-Link: Direkt zum Hauptinhalt springen