WCAG 2.1 - 2.4.6
Headings and Labels
Überschriften und Beschriftungen beschreiben das Thema oder den Zweck.
Inhalt
Was Bedeutet das Success Criterium 2.4.6 - Headings and Labels?Warum ist es so wichtig, das Success Criterium 2.4.6 - Headings and Labels zu beachten?Was hat das Success Criterium 2.4.6 - Headings and Labels mit dem BFSG zu tun?Lösungen für 2.4.6 - Headings and Labels anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 2.4.6 - Headings and Labels?Was Bedeutet das Success Criterium 2.4.6 - Headings and Labels?
Das WCAG Success Criterion 2.4.6 verlangt, dass Überschriften (z.B. die Überschriften auf einer Seite: H1, H2 ...) und Bezeichnungen (Labels) aussagekräftig und verständlich sind. Besucher*innen der Website – egal ob sie die Seite visuell, mit Screenreader oder anderen Hilfsmitteln nutzen – sollen direkt erkennen können, worum es in einem Bereich oder bei einem Eingabefeld geht.
Konkret bedeutet das:
- Überschriften dürfen nicht zu allgemein sein wie z.B. nur „Abschnitt“ oder „Mehr Infos“.
- Labels, etwa für Formulareingaben, müssen beschreiben, was im Feld erwartet wird, z.B. „E-Mail-Adresse“ statt nur „Eingabe“.
- Jede Überschrift gibt dem Abschnitt einen Sinn und Kontext, und hilft so bei der Orientierung auf der Seite.
- Für Nutzer*innen von Screenreadern sind verständliche Überschriften und Labels besonders wichtig, da sie sich häufig nur eine Übersicht der Überschriften vorlesen lassen oder durch Formularfelder springen.
Technische Anforderungen
- Überschriften müssen den Inhalt des folgenden Bereichs korrekt zusammenfassen oder beschreiben.
- Labels für Formularelemente müssen mittels
<label>und demfor-Attribut eindeutig dem zugehörigen Inputfeld zugewiesen sein und klar beschreiben, was das Feld bedeutet.
Warum ist es so wichtig, das Success Criterium 2.4.6 - Headings and Labels zu beachten?
Benutzerfreundliche und aussagekräftige Überschriften und Labels helfen allen Besucher*innen, die Seite schneller zu erfassen und zu bedienen. Menschen mit Screenreadern können sich eine Überschriftenstruktur und die Labels von Formularfeldern vorlesen lassen und finden dadurch schneller gesuchte Inhalte oder Eingabemöglichkeiten. Fehlen diese klaren Bezeichnungen, wird Navigation, Orientierung und Benutzung der Seite speziell für blinde und sehbehinderte Menschen erheblich erschwert und wichtige Informationen bleiben verborgen.
Was hat das Success Criterium 2.4.6 - Headings and Labels mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz verpflichtet Betreiber von Websites, sicherzustellen, dass ihre digitalen Angebote allen Menschen zugänglich sind. Dazu gehört eine verständliche Struktur mit sinnvollen Überschriften sowie klaren Labels für Formulare – explizit gefordert durch dieses WCAG Success Criterion. Wird 2.4.6 ignoriert, können Menschen mit Behinderungen die Website nicht gleichberechtigt nutzen. Daher ist die Erfüllung dieses Kriteriums zwingend notwendig für die Konformität mit dem BFSG.
Lösungen für 2.4.6 - Headings and Labels anhand von Codebeispielen
Falscher Code
<!-- Schlecht: Allgemeine oder nichtssagende Überschrift -->
<h2>Abschnitt</h2>
<p>Hier finden Sie Details zu unseren Angeboten...</p>Korrekter Code
<!-- Gut: Aussagekräftige, inhaltlich passende Überschrift -->
<h2>Unsere aktuellen Angebote im Überblick</h2>
<p>Hier finden Sie Details zu unseren Angeboten...</p>Im schlechten Beispiel ist die Überschrift zu allgemein. Besucher*innen wissen nicht, was der folgende Abschnitt behandelt. Das gute Beispiel beschreibt präzise, was im Abschnitt folgt, was gerade für Screenreader-Nutzer*innen hilft.
Falscher Code
<!-- Schlecht: Fehlendes, unzureichendes oder unspezifisches Feldlabel -->
<input type="text" id="email">
<!-- Nur ein Platzhalter, kein richtiges Label -->
<input type="text" placeholder="Ihre Eingabe">Korrekter Code
<!-- Gut: Aussagekräftiges Label, korrekt mit dem Eingabefeld verbunden -->
<label for="email">E-Mail-Adresse</label>
<input type="text" id="email">Im schlechten Beispiel fehlt ein Label komplett oder beschreibt nicht klar die erwartete Eingabe. Menschen, die assistive Technologien nutzen oder Felder automatisch ausfüllen wollen, wissen nicht, was sie angeben sollen. Das gute Beispiel nutzt ein eindeutig zugeordnetes und klares Label, sodass der Nutzer weiß, was eingegeben werden soll.
Wie löse ich Verstöße gegen das Success Criterium 2.4.6 - Headings and Labels?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.