Rolle Dokumentstruktur

`heading`

Kennzeichnet ein Element als Überschrift. Vorrangig <h1>–<h6> verwenden — diese liefern die korrekte Semantik und die richtige Ebene ohne zusätzlichen Aufwand. role="heading" sollte nur eingesetzt werden, wenn ein Element nicht als <h*> ausgezeichnet werden kann.

Wann zu verwenden

Vorrangig sind stets <h1> bis <h6> zu verwenden. Das native Überschriftenelement liefert die Rolle, die Ebene und ein eingebautes User-Agent-Stylesheet.

role="heading" ist nur dann angemessen, wenn kein natives Überschriftenelement verwendet werden kann — typischerweise innerhalb eines eingeschränkten CMS, das sämtlichen Text als <p> oder <div> rendert. In diesem Fall muss aria-level auf einen Wert von 1 bis 6 gesetzt werden (oder höher, wobei assistive Technologie Ebenen über 6 in der Praxis ignoriert).

Überschriftenebenen sollten nicht übersprungen werden: auf ein <h2> sollte kein <h4> folgen, ohne dass ein <h3> dazwischen steht. Screenreader-Nutzende, die per Überschrift navigieren, sind auf ein schlüssiges Dokument-Outline angewiesen.

Häufige Fehler

role="heading" ohne aria-level. Die Rolle muss die Ebene mit sich führen.
Visuell gestaltete „Überschriften“ (großer, fetter Text) in <div> oder <span> ohne Überschriften-Rolle. Screenreader-Nutzende überspringen sie vollständig.
Mehrere <h1>-Elemente auf einer Seite, wenn nur eine Hauptüberschrift beabsichtigt ist. Best Practice ist eine einzige <h1> pro Seite, die den Hauptinhalt benennt.
Ebenen überspringen — von h2 direkt zu h4 zu springen — zerstört das Dokument-Outline.
Dekorativen Text, der optisch wie eine Überschrift wirkt, aber keine inhaltliche Bedeutung hat, als Überschrift auszuzeichnen. Das beeinträchtigt die Screenreader-Navigation.

Beispiel

<!-- Bevorzugt -->
<h2>So wird eine Beschwerde eingereicht</h2>

<!-- Nur wenn <h2> nicht möglich ist -->
<div role="heading" aria-level="2">So wird eine Beschwerde eingereicht</div>