WCAG 2.4.6: Überschriften und Beschriftungen

WCAG 2.4.6 verlangt, dass Überschriften ihr Thema und Beschriftungen ihren Zweck beschreiben – es geht also um den Wortlaut, nicht um die Auszeichnung. Das Kriterium schreibt nicht vor, dass es Überschriften geben muss; sind welche da, müssen sie aber aussagekräftig sein.

(Englisch: Headings and Labels. Der BIK-BITV-Test nennt den Prüfschritt „Aussagekräftige Überschriften und Beschriftungen“.)

Das Wichtigste in Kürze

• 2.4.6 prüft den Wortlaut, nicht die Technik. Ob eine Überschrift ein <h2> ist, regelt 1.3.1 – ob sie etwas sagt, regelt 2.4.6.
• „Beschriftung“ ist mehr als das <label>-Element: Gemeint ist jeder sichtbare Text, der ein Bedienelement benennt – auch Button-Aufschriften und Tabellenköpfe. Linktexte gehören dagegen zu 2.4.4, nicht hierher.
• Der häufigste Verstoß sind generische Überschriften: „Details“, „Weitere Informationen“, „Sonstiges“, „Ihre Vorteile“.
• Englische aria-label in deutschen Oberflächen bewertet der BITV-Test ausdrücklich als nicht voll erfüllt – aria-label="close" ist ein Befund.
• Erforderliche Eingabeformate gehören ins Label, nicht erst in die Fehlermeldung: „Geburtsdatum (TT.MM.JJJJ)“.
• Doppelte Überschriften auf einer Seite sind ein sicheres Warnsignal – wenn dreimal „Details“ dasteht, ist keine davon aussagekräftig.
• Prüfen lässt sich das nur von Hand. Kein Werkzeug kann beurteilen, ob ein Text seinen Abschnitt trifft.
• Der Nebeneffekt ist groß: Dieselben präzisen Überschriften sind das, woran sich Suchmaschinen und KI-Systeme beim Zerlegen einer Seite orientieren.

Wie formuliere ich Überschriften richtig?

Überschriften und Beschriftungen sind Navigationsanker. Sehende überfliegen sie, Screenreader-Nutzer springen von Überschrift zu Überschrift, und beim Formular-Durchlauf hört man ausschließlich die Labels. In allen drei Fällen gilt: Was der Anker nicht sagt, muss man sich erarbeiten.

Der Normtext ist bewusst knapp – „Überschriften und Beschriftungen beschreiben Thema oder Zweck“ –, und genau deshalb lohnt sich der Blick in die deutsche Prüfpraxis. Der BITV-Prüfschritt macht daraus vier konkrete Fragen:

• Beschreiben Überschriften die Inhalte, die durch sie strukturiert werden? Also: Passt die Überschrift zu dem, was tatsächlich darunter steht?
• Sind Formularelemente aussagekräftig benannt? Dazu zählt auch, ob ein erforderliches Eingabeformat kommuniziert wird.
• Stimmen programmatisch hinterlegte Beschriftungen? aria-label, aria-labelledby, Alternativtexte grafischer Bedienelemente.
• Passen legend und label zusammen? In Gruppen aus fieldset und legend ergibt sich der Sinn erst aus der Kombination – „Lieferadresse“ plus „Straße“.

Bemerkenswert ist ein Punkt, den kein internationaler Leitfaden nennt, weil er englischsprachige Angebote nicht betrifft: Nicht übersetzte Beschriftungen sind ein Befund. Frameworks und Bibliotheken liefern ihre Bedienelemente mit englischen aria-label-Werten aus – close, previous, submit, menu. Im Deutschen sagt der Screenreader dann mitten im Satz ein englisches Wort, das die deutsche Sprachsynthese oft auch noch falsch ausspricht.

Zur Abgrenzung, weil das im Audit ständig durcheinandergeht:

Der vollständige Wortlaut steht im Understanding-Dokument des W3C zu 2.4.6; das deutsche Prüfvorgehen beschreibt der Prüfschritt 2.4.6 des BIK BITV-Tests.

Wen betrifft es besonders?

Für Screenreader-Nutzer sind Überschriften das primäre Navigationsmittel. In NVDA öffnet Einfg + F7 eine Liste aller Überschriften der Seite; man springt darin zum Ziel, statt sich linear vorzuarbeiten. Diese Liste ist das Inhaltsverzeichnis, das die Autorin nie geschrieben hat – und wenn darin dreimal „Details“ steht, ist sie wertlos. Beim Formular gilt dasselbe für Labels: Im Fokusmodus hört man den Namen des Feldes und sonst nichts.

Menschen mit kognitiven Einschränkungen brauchen Wegweiser, die beim ersten Lesen verständlich sind. Eine Überschrift, die man erst versteht, nachdem man den Abschnitt gelesen hat, hat ihre Aufgabe verfehlt.

Wer eine Bildschirmvergrößerung nutzt, sieht immer nur einen kleinen Ausschnitt und orientiert sich an Überschriften wie an Straßenschildern. Ein Schild, auf dem „Weiteres“ steht, hilft niemandem beim Abbiegen.

Und schließlich alle Eiligen: Rund 80 Prozent der Leser überfliegen eine Seite zuerst und lesen erst dann. Präzise Überschriften nützen beidem gleichermaßen: Barrierefreiheit und Nutzbarkeit.

Richtig & falsch im Code

<!-- Falsch: Überschrift ohne Aussage -->
<h2>Weitere Informationen</h2>

<!-- Richtig: das Thema steht drin, das Wichtigste vorn -->
<h2>Widerrufsrecht: 14 Tage ohne Angabe von Gründen</h2>

Bei Formularen ist die häufigste Lücke das erwartete Format. Es gehört ins Label oder in einen verknüpften Hinweis – nicht erst in die Fehlermeldung, wenn es zu spät ist:

<!-- Falsch: Label benennt den Zweck nicht, Format bleibt geheim -->
<label for="f7">Eingabe</label>
<input id="f7" name="f7" />

<!-- Richtig: Zweck und Format stehen vorher da -->
<label for="iban">IBAN</label>
<input id="iban" name="iban" aria-describedby="iban-hilfe"
       autocomplete="off" inputmode="text" />
<p id="iban-hilfe">Beispiel: DE89 3704 0044 0532 0130 00 – Leerzeichen sind erlaubt.</p>

Bei Bedienelementen ohne sichtbaren Text entscheidet der zugängliche Name. Und der gehört in die Sprache der Oberfläche:

<!-- Falsch: englisches Label in deutscher Oberfläche -->
<button type="button" aria-label="close">
  <svg aria-hidden="true" …></svg>
</button>

<!-- Falsch: Name beschreibt die Optik, nicht die Funktion -->
<button type="button" aria-label="Kreuz-Symbol">…</button>

<!-- Richtig: Sprache und Zweck stimmen -->
<button type="button" aria-label="Dialog schließen">
  <svg aria-hidden="true" …></svg>
</button>

Bei wiederkehrenden Elementen in Listen – „Mehr“, „Bearbeiten“, „Löschen“ – liefert die Gruppe den fehlenden Teil des Namens:

<!-- Richtig: der zugängliche Name enthält den Bezug -->
<h3 id="p-200">Ergonomischer Bürostuhl S-200</h3>
<button type="button" aria-labelledby="btn-loeschen p-200">
  <span id="btn-loeschen">Entfernen</span>
</button>
<!-- angesagt wird: „Entfernen Ergonomischer Bürostuhl S-200, Schaltfläche" -->

So testest du es

1. Die Überschriftenliste ziehen. Mit der Erweiterung HeadingsMap, über die Barrierefreiheitsansicht der DevTools oder in NVDA mit Einfg + F7. Dann die Liste allein lesen, ohne die Seite: Weiß man, was wo steht?
2. Den Doppel-Test machen. Kommt eine Überschrift zweimal identisch vor, ist sie fast sicher zu generisch. Ausnahme sind wiederkehrende Bereiche in getrennten Landmarken.
3. Das Formular blind durchgehen. Nur mit Tab durch alle Felder, dabei allein auf die Ansage hören. Sagt jedes Label für sich, was einzugeben ist – und in welchem Format?
4. Nach englischen Resten suchen. Im DOM nach aria-label=" greppen und die Werte durchsehen: close, next, previous, search, submit, menu, toggle. Die stammen fast immer aus Bibliotheken und sind schnell übersetzt.
5. Grafische Bedienelemente prüfen. Bei Icon-Buttons den zugänglichen Namen in den DevTools ablesen. Beschreibt er die Funktion oder das Bild? „Lupe“ ist ein Bild, „Suche starten“ ist eine Funktion.
6. Gruppen gegenlesen. Bei fieldset/legend ergibt erst die Kombination den Sinn. „Rechnungsadresse – Straße“ ist eindeutig, „Adresse – Feld 2“ nicht.

Häufiger Fehler in der Praxis

Der Klassiker ist die Überschrift aus der Bauteil-Bibliothek. Ein Akkordeon-Baustein heißt im Redaktionssystem „Details“, und weil das Feld vorbelegt ist, bleibt es stehen – auf jeder Produktseite, mehrfach. Für sehende Nutzer ist das kaum störend, weil der Inhalt direkt daneben steht. In der Überschriftenliste eines Screenreaders steht dann aber sechsmal „Details“ untereinander. Ich würd dir raten, solche Vorbelegungen im Redaktionssystem gleich zu leeren, statt sie mit einem Platzhalter zu füllen.

Der zweite ist das englische Label aus der Bibliothek. Ein Dialog aus einer UI-Bibliothek bringt aria-label="close" mit, ein Karussell aria-label="next slide", eine Tabelle aria-label="sort ascending". Sichtbar ist nichts davon – man findet es nur, wenn man danach sucht oder mit dem Screenreader hört. Der BITV-Test führt genau diesen Fall als Beispiel für „nicht voll erfüllt“.

Der dritte ist das Format im falschen Moment. Das Feld heißt „Geburtsdatum“, das Format erfährt man erst nach dem Absenden: „Bitte im Format TT.MM.JJJJ eingeben“. Das ist zwar 3.3.3 Fehlervorschlag korrekt umgesetzt, aber 2.4.6 verlangt die Angabe schon vorher – der BITV-Test nennt fehlende Formatangaben ausdrücklich als Mangel bei der Beschriftung. Und praktisch ist es ohnehin besser: Ein Fehler, der nicht passiert, muss auch nicht erklärt werden.

Häufige Fragen

Verlangt 2.4.6, dass ich überhaupt Überschriften verwende?

Nein. Das Kriterium greift nur, wenn Überschriften vorhanden sind – dann müssen sie aussagekräftig sein. Die Pflicht, Struktur überhaupt auszuzeichnen, ergibt sich aus 1.3.1; die Pflicht, jeden Abschnitt mit einer Überschrift zu versehen, steht auf Stufe AAA in 2.4.10 und ist damit für BFSG und BITV nicht verbindlich.

Ist „Beschriftung“ dasselbe wie das <label>-Element?

Nein, der Begriff ist weiter. Gemeint ist jeder Text, der ein Bedienelement für den Nutzer benennt – die Aufschrift eines Buttons, die Überschrift eines Tabellenkopfs, die Legende einer Feldgruppe, der Text neben einem Kontrollkästchen. Ob er technisch verknüpft ist, prüft 1.3.1; ob er etwas aussagt, prüft 2.4.6.

Wie lang darf eine Überschrift sein?

Es gibt keine Grenze. Wichtig ist, dass das Unterscheidende vorn steht, denn Screenreader-Listen und überfliegende Blicke erfassen den Anfang zuerst. „Lieferzeiten und Versandkosten“ ist besser als „Alles Wissenswerte rund um das Thema Lieferung und Versand bei uns im Haus“ – nicht weil es kürzer ist, sondern weil die Begriffe vorn stehen.

Zählt eine Schaltfläche mit „Mehr erfahren“ als Verstoß?

Für 2.4.6 kommt es darauf an, ob der Zweck aus der Beschriftung hervorgeht – bei zehn identischen „Mehr erfahren“-Schaltflächen auf einer Seite geht er das nicht. Streng genommen ist das zuerst ein Fall für 2.4.4 Linkzweck im Kontext, wo der umgebende Kontext mitzählen darf. Praktisch löst man beides mit demselben Handgriff: „Mehr über den Bürostuhl S-200“.

Kann axe oder Lighthouse das prüfen?

Nein. Die Werkzeuge finden leere Überschriften, fehlende Labels und übersprungene Ebenen – also 1.3.1-Themen. Ob ein Text seinen Abschnitt beschreibt, ist eine inhaltliche Beurteilung und bleibt manuell. Deshalb gehört 2.4.6 in die Redaktionsarbeit, nicht in die Testpipeline.

Verwandte Themen

• Überschriften-Hierarchie (h1–h6) – die strukturelle Grundlage
• Labels & Beschriftungen – Formularpraxis im Detail
• 2.4.4 Linkzweck im Kontext – dasselbe Prinzip für Links
• 2.5.3 Beschriftung im Namen – sichtbarer Text und zugänglicher Name
• Semantik & SEO – warum präzise Überschriften doppelt zahlen