Reihenfolge der Überschriften

Was geprüft

Gelesen wird die Folge der Überschriften h1 bis h6 im HTML. Gemeldet wird jeder Sprung, bei dem die Ebene um mehr als eins steigt (z. B. h2 → h4); Zurückspringen auf eine höhere Ebene ist erlaubt. Ohne Überschriften trifft der Punkt nicht zu. Der Check liest nur das ausgelieferte HTML, nicht die gerenderte Seite, und deckt damit nur einen automatisch messbaren Teil ab.

Wie relevant

Niedrig, weil die Inhalte trotz Sprung erreichbar bleiben. Die Gliederung wird für Screenreader-Nutzer aber schwerer verständlich.

Warum

Viele Screenreader-Nutzer springen über Überschriften durch eine Seite und erschließen sich so ihren Aufbau. Fehlende Ebenen wirken wie fehlende Abschnitte. Ob daraus eine rechtliche Pflicht folgt, klären Sie mit Ihrer Rechtsberatung; öffentliche Leitfäden bietet die Bundesfachstelle Barrierefreiheit (Deutschland).

Wie beheben

Wählen Sie die Überschriftenebene nach der Gliederung, nicht nach der gewünschten Schriftgröße. Die Größe steuern Sie per CSS-Klasse, die Ebene bleibt lückenlos.

Nebenwirkung: Eine andere Ebene ändert im Theme oft die Schriftgröße; gleichen Sie das per CSS-Klasse aus. Die Überschriftenstruktur kann auch die Darstellung in Inhaltsverzeichnis-Plugins verändern.

WordPress: Seitenbaukästen und Widgets setzen Überschriftenebenen oft fest (z. B. h4 in der Seitenleiste oder im Footer). In den meisten Buildern lässt sich das HTML-Tag einer Überschrift getrennt von ihrer Größe einstellen.

Codebeispiel

HTML

<h1>Leistungen</h1>
<h2>Beratung</h2>
<!-- statt h4 wegen der kleineren Schrift: -->
<h3 class="klein">Ablauf</h3>

<style>
  .klein { font-size: 1rem; }
</style>

Weiterführende Quellen

• https://www.w3.org/WAI/tutorials/page-structure/headings/
• https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html
• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements