Abschnittsüberschriften

Was das Kriterium verlangt

Wenn eine Seite in Abschnitte unterteilt ist, muss jeder Abschnitt eine programmatische Überschrift erhalten. Das Erfolgskriterium schreibt nicht vor, dass jede Seite in Abschnitte aufgeteilt sein muss — kurze, zweckgebundene Seiten (z. B. ein Anmeldeformular) sind ohne Unterüberschriften zulässig. Wo Abschnitte jedoch vorhanden sind, sind echte <h1>–<h6>-Auszeichnungen erforderlich, damit assistive Technologie eine Überschriftengliederung aufbauen kann.

Dieses Erfolgskriterium liegt auf Stufe AAA, die zugrundeliegende Praxis — echte Überschriften zu verwenden — ist jedoch auch durch 1.3.1 (Informationen und Beziehungen) auf Stufe A impliziert, sodass die meisten barrierefreien Seiten es beiläufig erfüllen.

So wird es umgesetzt

• <h1> für den Seitentitel verwenden (einmal pro Seite) und mit <h2>, <h3> für verschachtelte Abschnitte schrittweise absteigen, ohne Ebenen zu überspringen.
• <div class="heading"> und gestaltete <p>-„Überschriften“ durch echte Überschriften-Tags ersetzen.
• Jeden klar abgrenzbaren Abschnitt in Langform-Inhalten (Artikel, Dokumentationsseite, Einstellungsbereich mit Registerkarten) mit einer Überschrift beginnen lassen.
• Bei Karten-Komponenten, die Sammlungen ähnlicher Abschnitte darstellen, jede Karte mit einer Überschrift auf der angemessenen Ebene versehen.
• Die Überschriftengliederung mit dem HTML5-Gliederungsalgorithmus validieren (axe DevTools, headingsMap-Browser-Erweiterung oder W3C-Validator).

Häufige Fehler

• Fettgedruckte Absätze, die als Überschriften erscheinen — typografisch überzeugend, für die Überschriftenliste eines Screenreaders unsichtbar.
• Übersprungene Überschriftenebenen (<h1> springt auf <h4>), weil das CMS-Team die Ebenen nach Schriftgröße statt nach Hierarchie ausgewählt hat.
• Mehrere <h1>-Elemente auf einer einzigen Seite (im HTML5-Gliederungsmodell zulässig, bricht aber die Navigation in den meisten assistiven Technologien).
• Alle Abschnitte als <h2> ausgezeichnet, unabhängig von der Verschachtelungstiefe — die Gliederung wird dadurch flachgedrückt.
• Hero-Text als <h1> ausgezeichnet, während der eigentliche Seitentitel darunter als <h2> platziert ist.

Warum es wichtig ist

Für Screenreader-Nutzende ist die Überschriftengliederung das Inhaltsverzeichnis. JAWS und NVDA zeigen sie in einem Dialog an (Insert+F6 in JAWS); VoiceOver macht sie im Rotor zugänglich. Eine Seite ohne Überschriften oder mit Überschriften, die nur der visuellen Hervorhebung dienen, zwingt diese Nutzenden dazu, Zeile für Zeile zu scrollen. Selbst bei reiner AA-Konformität zahlt sich die konsequente Verwendung von Abschnittsüberschriften für SEO, Inhaltswiederverwendung und redaktionelle Übersichtlichkeit aus.