WCAG 2.4.6 Überschriften und Beschriftungen (Labels)

Das Erfolgskriterium 2.4.6 hilft Menschen zu verstehen, was eine Seite enthält, und den Teil zu finden, den sie brauchen. Screenreader-Nutzer springen von Überschrift zu Überschrift, Menschen mit kognitiven Beeinträchtigungen sind auf klare Überschriften angewiesen, um der Struktur zu folgen, und alle füllen ein Formular schneller aus, wenn die Feldbeschriftungen genau sagen, was erwartet wird. Es gehört zur Konformitätsstufe AA und ist Teil von EN 301 549 (Abschnitt 9.2.4.6). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Überschriften und Beschriftungen beschreiben Thema oder Zweck.

Wichtige Details laut W3C:

• das Kriterium verlangt nicht, dass es Überschriften oder Labels gibt — es verlangt, dass die vorhandenen aussagekräftig sind;
• ein Label ist Text, der allen Nutzern angezeigt wird und eine Komponente kennzeichnet (nicht nur das HTML-Element <label>);
• Labels dürfen kurz sein, solange sie den Inhalt eindeutig kennzeichnen;
• Überschriften und Labels müssen außerdem korrekt ausgezeichnet sein, damit assistive Technologien sie finden — dieser Teil gehört zu 1.3.1 Info und Beziehungen.

Typische Fehler in Onlineshops

• vage Abschnittsüberschriften wie „Mehr“, „Info“ oder „Abschnitt 2“ auf einer Produktseite;
• mehrere identische Überschriften („Details“) auf einer Seite, die verschiedene Dinge behandeln;
• Formularfelder mit dem Label „Name“, obwohl Vor- und Nachname getrennt sind, oder „Nummer“ ohne Hinweis, ob Telefon- oder Hausnummer gemeint ist;
• ein Gutscheinfeld, das nur „Code“ heißt;
• Überschriften zur Gestaltung — großer Text wie „Kostenloser Versand!“ als <h2> ausgezeichnet, während echte Abschnittstitel einfacher <div>-Text sind.

So prüfen Sie es

Automatisch: Für dieses Kriterium gibt es keine axe-core-Regel. Software kann erkennen, dass eine Überschrift oder ein Label existiert, aber nicht, ob es den Inhalt beschreibt, deshalb ist eine manuelle Prüfung nötig. Verwandte Probleme wie fehlende Formular-Labels (1.3.1, 4.1.2) und übersprungene Überschriftenebenen (Best Practice) meldet unser Checker unter eigenen Regeln in der Regelbibliothek.

Manuell: Lassen Sie sich die Überschriften einer Seite auflisten (die Überschriftenliste eines Screenreaders oder eine Browsererweiterung erledigt das). Lesen Sie sie für sich: Ergeben sie eine Gliederung der Seite? Gehen Sie dann jedes Formular durch — Newsletter, Konto, Checkout — und lesen Sie jedes Label, ohne auf das Feld zu schauen. Wüssten Sie, was Sie eingeben sollen?

So beheben Sie es

• Schreiben Sie Überschriften, die den Inhalt benennen: „Größe und Passform“, „Lieferung und Rückgabe“, „Kundenbewertungen (24)“.
• Verwenden Sie pro Seite ein <h1>, das zum Hauptthema der Seite passt, und verschachteln Sie h2/h3 logisch.
• Machen Sie Labels konkret: „E-Mail-Adresse“, „Telefonnummer (für den Kurier)“, „Rabattcode“.
• Verwenden Sie für Abschnittstitel echte Überschriftenelemente und für Dekoration einfach gestalteten Text.

Verwandte Kriterien

• 2.4.2 Seite mit Titel versehen — der Seitentitel muss aussagekräftig sein.
• 2.5.3 Beschriftung (Label) im Namen — das sichtbare Label muss im zugänglichen Namen stehen.
• 2.4.1 Blöcke umgehen — Überschriften helfen, wiederholte Inhalte zu überspringen.

Häufige Fragen

Verlangt WCAG 2.4.6 Überschriften auf jeder Seite?

Nein. Laut W3C verlangt 2.4.6 keine Überschriften oder Labels. Es verlangt, dass vorhandene Überschriften und Labels ihr Thema oder ihren Zweck beschreiben. Andere Kriterien wie 1.3.1 und 3.3.2 regeln, wann Struktur und Labels nötig sind.

Verlangen die WCAG eine strikte Überschriftenreihenfolge?

WCAG 2.2 hat kein Erfolgskriterium, das übersprungene Überschriftenebenen verbietet. Eine logische Reihenfolge (h1, dann h2, dann h3) ist eine dringende Best Practice, und unser Checker meldet übersprungene Ebenen als Best-Practice-Hinweis, nicht als Verstoß gegen 2.4.6.

Was ist ein Label in den WCAG?

Text oder eine andere Komponente mit Textalternative, die allen Nutzern angezeigt wird, um eine Komponente zu kennzeichnen, zum Beispiel der sichtbare Text neben einem Formularfeld. Es ist nicht auf das HTML-Element label beschränkt.