WCAG 2.4.10: Abschnittsüberschriften

WCAG 2.4.10 verlangt, dass Abschnittsüberschriften verwendet werden, um Inhalte zu organisieren, wann immer eine Seite mehrere Abschnitte enthält, sodass Nutzer die Struktur der Seite navigieren und verstehen können. Dieses Kriterium unterstützt Screenreader-Nutzer, kognitive Barrierefreiheitsbedürfnisse und alle, die auf die Dokumentstruktur angewiesen sind, um sich in langen oder komplexen Inhalten zu orientieren.

Was diese Regel bedeutet

WCAG 2.4.10 — Abschnittsüberschriften (Level AAA) besagt: „Abschnittsüberschriften werden verwendet, um den Inhalt zu organisieren.“ Das bedeutet, dass, wenn eine Webseite oder ein Dokument in mehrere klar abgegrenzte Abschnitte unterteilt ist, jeder Abschnitt eine programmatisch ermittelbare Überschrift haben muss, die sein Thema oder seinen Zweck beschreibt. Ziel ist nicht nur, visuell gestalteten Text zu haben, der wie eine Überschrift aussieht, sondern tatsächliches Überschriften-Markup zu verwenden, das sowohl Browsern als auch unterstützenden Technologien eine hierarchische Struktur vermittelt.

In HTML bedeutet dies, die nativen Überschriftselemente <h1> bis <h6> angemessen zu verwenden. Eine Seite mit einem Hauptthema sollte eine <h1> tragen, Hauptabschnitte sollten <h2> verwenden, Unterabschnitte darin <h3> und so weiter. Die Überschriftenebene sollte die logische Tiefe des Inhalts widerspiegeln und nicht willkürlich aus visuellen Gestaltungsgründen gewählt werden. Wo ARIA verwendet wird, ist die Kombination aus role="heading" und aria-level ebenfalls zulässig, obwohl native HTML-Elemente immer vorzuziehen sind.

Ein Bestehen nach diesem Kriterium bedeutet, dass jeder klar abgegrenzte Inhaltsabschnitt auf der Seite eine Überschrift hat, die den folgenden Inhalt genau beschreibt, dass die Überschrift semantisch ausgezeichnet ist (nicht nur visuell fett oder groß gestaltet) und dass die Überschriftenhierarchie die inhaltliche Organisation des Dokuments logisch widerspiegelt. Ein Nichtbestehen tritt ein, wenn Inhaltsabschnitte überhaupt keine Überschrift haben, wenn Überschriften willkürlich übersprungen werden (z. B. ein Sprung von <h1> zu <h4> ohne logischen Grund) oder wenn statt korrekter Überschriftselemente normal gestalteter Text verwendet wird, um einen Abschnitt zu kennzeichnen.

Wichtig ist der offizielle WCAG-Ausnahmehinweis: Dieses Kriterium gilt nur, wenn die Seite selbst Abschnitte enthält. Sehr kurze Seiten mit einem einzigen, einheitlichen Thema – etwa ein einfaches Login-Formular ohne klar abgegrenzte Abschnitte – müssen nicht mehrere Überschriften haben. Die Anforderung wird durch das Vorhandensein mehrerer klar abgegrenzter Inhaltsbereiche ausgelöst, die von einer Kennzeichnung profitieren. Außerdem schreibt dieses Kriterium keine bestimmte Überschriftenhierarchie jenseits einer logischen Organisation vor; die zentrale Anforderung ist, dass Überschriften existieren und überall dort sinnvoll eingesetzt werden, wo Abschnitte existieren.

Dieses Kriterium ist als Level AAA klassifiziert, was bedeutet, dass es für die grundlegende WCAG-2.2-Konformität nicht erforderlich ist, aber eine Best-Practice für Barrierefreiheit darstellt, die die Nutzungserfahrung für eine breite Palette von Nutzerinnen und Nutzern deutlich verbessert.

Warum es wichtig ist

Screenreader-Nutzerinnen und -Nutzer verlassen sich auf Überschriften als ihr primäres Mittel, um in langen Dokumenten und auf Webseiten zu navigieren. Laut der Screen Reader User Survey von WebAIM navigiert die große Mehrheit der Screenreader-Nutzenden regelmäßig über Überschriften – sie wird durchgängig als eine der am häufigsten genutzten Navigationsmethoden eingestuft. Wenn Überschriften fehlen oder falsch strukturiert sind, muss ein Screenreader-Nutzer jeden Inhalt von oben bis unten sequentiell anhören – das entspricht dem, eine sehende Person zu zwingen, ein ganzes Buch ohne Inhaltsverzeichnis oder Kapitelüberschriften zu lesen.

Betrachten wir ein Beispiel aus der Praxis: Eine türkische E-Commerce-Seite, die Elektronik verkauft, könnte eine Produktdetailseite mit Abschnitten zu Produktspezifikationen, Kundenbewertungen, Versandinformationen und Rückgabebedingungen haben. Wenn keiner dieser Abschnitte ein Überschriftselement hat, kann ein blinder Nutzer, der mit NVDA in Firefox navigiert, nicht zwischen ihnen springen. Er muss entweder den gesamten Inhalt anhören oder mit Versuch-und-Irrtum-Suchstrategien arbeiten, was die kognitive Belastung und die benötigte Zeit erheblich erhöht. Mit korrekten <h2>-Überschriften für jeden Abschnitt kann derselbe Nutzer die Taste H drücken, um innerhalb von Sekunden sofort von Abschnitt zu Abschnitt zu springen.

Auch Nutzerinnen und Nutzer mit kognitiven Beeinträchtigungen profitieren erheblich. Klare Überschriften fungieren als Wegweiser und ermöglichen es Menschen mit Aufmerksamkeitsstörungen, Leseschwierigkeiten oder Gedächtnisbeeinträchtigungen, sich nach einem Konzentrationsverlust schnell wieder zu orientieren. Die Weltgesundheitsorganisation schätzt, dass weltweit etwa 1,3 Milliarden Menschen mit irgendeiner Form von Behinderung leben, und kognitive sowie neurologische Beeinträchtigungen machen einen großen und wachsenden Teil dieser Bevölkerung aus.

Motorisch beeinträchtigte Nutzerinnen und Nutzer, die auf reine Tastaturnavigation oder Schaltzugangsgeräte angewiesen sind, profitieren ebenfalls, da die Überschriftenstruktur von vielen unterstützenden Technologien genutzt wird, um Möglichkeiten zum Überspringen von Navigation zu schaffen und so den körperlichen Aufwand zu verringern, der nötig ist, um den gewünschten Inhaltsbereich zu erreichen.

Über den Zugang für Menschen mit Behinderungen hinaus hat eine korrekte Überschriftenstruktur erhebliche SEO-Vorteile. Suchmaschinen nutzen die Überschriftenhierarchie, um die thematische Struktur einer Seite zu verstehen, was das Ranking und die Art beeinflussen kann, wie Inhalte in Suchergebnissen angezeigt werden. Eine gut strukturierte Überschriften-Gliederung signalisiert sowohl Nutzenden als auch Crawlern Inhaltsqualität. Dies macht das geschäftliche Argument für die Umsetzung dieses AAA-Kriteriums überzeugend, selbst für Organisationen, die rechtlich nicht verpflichtet sind, es zu erfüllen.

Wie man testet

Automatischer Scan mit axe DevTools oder Lighthouse: Installieren Sie die Browser-Erweiterung axe DevTools (verfügbar für Chrome und Firefox) und führen Sie einen Scan der gesamten Seite durch. Überprüfen Sie alle Probleme im Zusammenhang mit heading-order und page-has-heading-one. Beachten Sie, dass ein sauberer automatischer Scan die WCAG-2.4.10-Konformität nicht bestätigt – er deckt nur den automatisierbaren Teil der Prüfungen ab. Lighthouse in den Chrome DevTools zeigt Überschriften-bezogene Probleme ebenfalls in seinem Accessibility-Audit an; achten Sie auf Warnungen wie „Heading elements are not in a sequentially-descending order“.
Manuelle Inhaltsprüfung – Dokumentgliederung: Verwenden Sie eine Browser-Erweiterung wie HeadingsMap (verfügbar für Chrome und Firefox), um eine visuelle Gliederung aller Überschriftselemente auf der Seite zu erzeugen. Prüfen Sie diese Gliederung kritisch: Spiegelt sie die Inhaltsstruktur der Seite korrekt wider? Ist jeder klar abgegrenzte Abschnitt durch eine Überschrift vertreten? Gibt es Inhaltsabschnitte, die auf der Seite sichtbar sind, aber nicht in der Gliederung erscheinen? Wenn ja, fehlen diesen Abschnitten Überschriften und die Seite besteht 2.4.10 nicht.
Screenreader-Navigation mit NVDA und Firefox: Öffnen Sie die Seite in Firefox mit laufendem NVDA. Drücken Sie H, um vorwärts durch die Überschriften zu springen, und Shift+H, um rückwärts zu springen. Wenn Sie auf jeder Überschrift landen, prüfen Sie, ob die angesagte Überschrift den folgenden Inhalt korrekt beschreibt. Achten Sie auch darauf, ob Sie auf größere Inhaltsblöcke stoßen, die nie als zu einer Überschrift gehörend angekündigt werden. Öffnen Sie die Elementliste von NVDA (NVDA+F7), wählen Sie den Reiter „Headings“ und prüfen Sie die vollständige Überschriftenliste, um fehlende oder falsch beschriftete Abschnitte zu erkennen.
Screenreader-Navigation mit VoiceOver und Safari (macOS/iOS): Aktivieren Sie unter macOS VoiceOver (Command+F5) und öffnen Sie die Seite in Safari. Verwenden Sie VO+Command+H, um durch die Überschriften zu navigieren. Unter iOS nutzen Sie den Rotor (mit zwei Fingern wischen, um ihn auf „Headings“ zu stellen) und wischen dann nach unten, um durch die Überschriften zu gehen. Vergewissern Sie sich, dass alle Inhaltsabschnitte über die Überschriftennavigation erreichbar sind.
Screenreader-Navigation mit JAWS und Chrome: Drücken Sie in JAWS H, um durch die Überschriften zu wechseln, und öffnen Sie die Überschriftenliste mit Einfügen+F6. Prüfen Sie die Liste auf Vollständigkeit und logische Hierarchie. Bestätigen Sie, dass Überschriften nicht nur zu Gestaltungszwecken verwendet werden – nur echte Abschnittsbezeichnungen sollten als Überschriften erscheinen.
Prüfung mit reiner Tastaturnavigation: Versuchen Sie, nur mit der Tastatur durch alle Hauptabschnitte der Seite zu navigieren, ohne Überschriften zu verwenden. Notieren Sie, wie oft Sie durch interaktive Elemente tabben müssen, um jeden Abschnitt zu erreichen. Dies vermittelt ein Gefühl für die Belastung, der Tastaturnutzende ausgesetzt sind, wenn eine korrekte Überschriftenstruktur fehlt.

Wie man es behebt

Abschnitte nur mit gestaltetem Text beschriftet – falsch

<div class='section'>
  <p class='section-title'>Product Specifications</p>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</div>

<div class='section'>
  <p class='section-title'>Customer Reviews</p>
  <p>This product exceeded my expectations.</p>
</div>

Abschnitte nur mit gestaltetem Text beschriftet – korrekt

<!-- Using semantic heading elements makes sections navigable by screen readers -->
<section>
  <h2>Product Specifications</h2>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</section>

<section>
  <h2>Customer Reviews</h2>
  <p>This product exceeded my expectations.</p>
</section>

Übersprungene Überschriftenebenen aus Gestaltungsgründen – falsch

<h1>Annual Report 2024</h1>
<!-- h4 used here because it looks smaller visually, skipping h2 and h3 -->
<h4>Financial Overview</h4>
<p>Revenue grew by 12% this year...</p>
<h4>Regional Performance</h4>
<p>The Istanbul region led growth...</p>

Übersprungene Überschriftenebenen aus Gestaltungsgründen – korrekt

<h1>Annual Report 2024</h1>
<!-- h2 used for major sections; CSS controls visual size, not heading level -->
<h2>Financial Overview</h2>
<p>Revenue grew by 12% this year...</p>
<h2>Regional Performance</h2>
<p>The Istanbul region led growth...</p>

Keine Überschrift für einen wichtigen Seitenabschnitt – falsch

<main>
  <h1>Contact Us</h1>
  <form>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name'>
    <label for='message'>Message</label>
    <textarea id='message' name='message'></textarea>
    <button type='submit'>Send</button>
  </form>
  <!-- This office locations section has no heading -->
  <div>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </div>
</main>

Keine Überschrift für einen wichtigen Seitenabschnitt – korrekt

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Send Us a Message</h2>
    <form>
      <label for='name'>Name</label>
      <input type='text' id='name' name='name'>
      <label for='message'>Message</label>
      <textarea id='message' name='message'></textarea>
      <button type='submit'>Send</button>
    </form>
  </section>
  <!-- Office locations section now has a descriptive heading -->
  <section>
    <h2>Our Offices</h2>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </section>
</main>

ARIA-Überschriftenrolle ohne aria-level verwendet – falsch

<!-- role=heading without aria-level defaults to level 2, which may be wrong -->
<div role='heading'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

ARIA-Überschriftenrolle ohne aria-level verwendet – korrekt

<!-- Native HTML is strongly preferred; if ARIA is used, aria-level must be explicit -->
<!-- Preferred: -->
<h2>Shipping Policy</h2>
<p>Orders are shipped within 2 business days...</p>

<!-- Acceptable when native heading cannot be used: -->
<div role='heading' aria-level='2'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Häufige Fehler

Verwendung von CSS-Klassen wie .title oder .section-header auf <p>- oder <div>-Elementen statt tatsächlicher <h1>–<h6>-Elemente: Visuelle Gestaltung allein vermittelt unterstützenden Technologien keine Struktur. Die Überschrift muss ein echtes Überschriftselement sein oder eine gültige ARIA-Überschriftenrolle mit expliziter Ebene tragen.
Auswahl von Überschriftenebenen basierend auf Schriftgröße statt Dokumenthierarchie: Die Wahl von <h4>, weil es in der gewünschten visuellen Größe gerendert wird, obwohl es logisch ein <h2> sein sollte, zerstört die Dokumentgliederung und verwirrt Screenreader-Nutzende, die „Überschrift Ebene 4“ hören, ohne dass zuvor eine Ebene 2 oder 3 vorhanden war.
Anwenden von font-size- oder font-weight-Overrides, um <h1> visuell zu verkleinern, statt ein Überschriftselement niedrigerer Ebene zu verwenden: Dies erzeugt eine Diskrepanz zwischen visueller und semantischer Hierarchie; verwenden Sie CSS zur Größensteuerung und native Überschriftenebenen zur Vermittlung der Struktur.
Auslassen von Überschriften in dynamisch geladenen Inhaltsabschnitten (z. B. Tab-Panels, modale Dialoge oder AJAX-geladene Ergebnisse): Wenn neuer Inhalt in die Seite eingefügt wird, fehlt ihm häufig die Überschriftenstruktur. Jeder dynamisch gerenderte Abschnitt sollte eine passende Überschrift enthalten, damit Nutzende, die über Überschriften navigieren, nicht in einer unbeschrifteten Inhaltsinsel stranden.
Verwendung nur einer <h1> für den Seitentitel und keiner weiteren Überschriften auf einer Seite mit fünf oder mehr klar abgegrenzten Inhaltsabschnitten: Das Vorhandensein einer <h1> erfüllt zwar automatische Checks, aber nicht 2.4.10, wenn nachfolgende Hauptabschnitte unbeschriftet bleiben.
Verschachteln von Überschriften innerhalb von <button>- oder <a>-Elementen: Das Platzieren einer Überschrift in einem interaktiven Element erzeugt widersprüchliche Rollen für unterstützende Technologien und ist ungültiges HTML. Überschriften sollten Inhaltsabschnitte kennzeichnen, nicht interaktive Steuerelemente.
Verwendung von role='heading' ohne Angabe von aria-level: Die implizite ARIA-Standardeinstellung ist Ebene 2, was möglicherweise nicht der beabsichtigten Dokumentstruktur entspricht und stillschweigend eine falsche Gliederung erzeugt, wenn sich der Abschnitt auf einer anderen Ebene befindet.
Hinzufügen dekorativer oder wiederholter Überschriften – z. B. Wiederholung des Seitentitels als <h2> in jeder Inhaltskarte –, die Überschriftenrauschen erzeugen, ohne einen sinnvollen Navigationswert zu bieten: Überschriften sollten den Abschnitt, den sie einleiten, eindeutig und treffend beschreiben; redundante Überschriften mindern den Nutzen der Überschriftennavigation für Screenreader-Nutzende.
Visuelles Ausblenden von Überschriften mit display:none oder visibility:hidden in dem Versuch, nur für Screenreader sichtbare Struktur bereitzustellen: Diese CSS-Eigenschaften blenden das Element auch für unterstützende Technologien aus. Verwenden Sie die gängige Technik für visuell versteckte Inhalte (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);), wenn eine Überschrift im Accessibility-Tree vorhanden sein, aber nicht auf dem Bildschirm sichtbar sein soll.
Versäumnis, die Überschriftenstruktur zu aktualisieren, wenn Seiteninhalte im Rahmen eines Redesigns neu organisiert werden: Überschriften, die während der Erstentwicklung hinzugefügt wurden, bleiben oft veraltet, wenn Inhaltsabschnitte neu angeordnet, zusammengeführt oder ersetzt werden. Überschriften-Audits sollten Teil jedes Inhalts- oder Design-Review-Zyklus sein, nicht eine einmalige Barrierefreiheitsmaßnahme.

Bezug zu den Barrierefreiheitsvorschriften der Türkei

Die türkische Präsidialverfügung 2025/10, veröffentlicht im Amtsblatt Nr. 32933 am 21. Juni 2025, legt umfassende digitale Barrierefreiheitsverpflichtungen für eine breite Palette von in der Türkei tätigen Einrichtungen fest. Die Verfügung richtet sich bei der digitalen Barrierefreiheitskonformität an WCAG 2.2 als technischem Standard aus und gilt für öffentliche Institutionen, E-Commerce-Plattformen, Banken und Finanzinstitute, Krankenhäuser und Gesundheitsdienstleister, Telekommunikationsunternehmen mit 200.000 oder mehr Abonnentinnen und Abonnenten, Reisebüros, private Transportunternehmen und Privatschulen, die vom Bildungsministerium (MoNE) autorisiert sind.

WCAG 2.4.10 — Abschnittsüberschriften ist ein Kriterium auf Level AAA. Das bedeutet, dass es nicht zu den minimal rechtlich geforderten Kriterien nach der Verfügung gehört, die für die betroffenen Einrichtungen Konformität auf den Levels A und AA vorschreibt. Der weiter gefasste Zweck der Verfügung besteht jedoch darin, einen sinnvollen digitalen Zugang für alle Nutzenden sicherzustellen, und AAA-Kriterien wie 2.4.10 werden ausdrücklich als Best-Practice für Barrierefreiheit anerkannt.

Für betroffene Einrichtungen – insbesondere öffentliche Institutionen, Banken, Krankenhäuser und große Telekommunikationsanbieter – zeigt die Umsetzung von WCAG 2.4.10 ein Engagement für Barrierefreiheit, das über die regulatorischen Mindestanforderungen hinausgeht. In der Praxis sind gut strukturierte Überschriftenhierarchien auch eine Voraussetzung für mehrere AA-Kriterien (wie 1.3.1 Info and Relationships und 2.4.6 Headings and Labels), was bedeutet, dass Organisationen, die eine vollständige AA-Konformität anstreben, im Rahmen dieser Bemühungen zwangsläufig auch eine Annäherung an die 2.4.10-Konformität erreichen werden.

Spezialisierte Dienste, die sich an Nutzerinnen und Nutzer mit Behinderungen richten, oder digitale Dienste, die von öffentlichen Institutionen für eine vielfältige Bürgerinnenschaft angeboten werden – darunter ältere Menschen, Menschen mit kognitiven Beeinträchtigungen oder Nutzende unterstützender Technologien –, würden besonders von der vollständigen Umsetzung von 2.4.10 profitieren. Der wachsende Fokus der Türkei auf digitale Regierungsdienste (e-devlet) und die Ausweitung des E-Commerce machen eine robuste Inhaltsstruktur nicht nur zu einer Barrierefreiheitsanforderung, sondern auch zu einer Priorität in Bezug auf Nutzbarkeit und rechtliches Risikomanagement.

Organisationen in der Türkei, die sich freiwillig nach WCAG 2.2 Level AAA – einschließlich 2.4.10 – zertifizieren lassen, positionieren sich als Vorreiter in Sachen Barrierefreiheit, was das Vertrauen in die Marke stärkt, das Prozessrisiko von Rechtsstreitigkeiten reduziert und ihre potenzielle Zielgruppe auf die geschätzten 8,5 Millionen Menschen mit Behinderungen in der Türkei erweitert, wie vom Türkischen Statistischen Institut (TÜİK) berichtet.