WCAG 2.1 - 4.1.2
Name, Role, Value
Für alle Benutzeroberflächenkomponenten (einschließlich, aber nicht beschränkt auf: Formularelemente, Links und durch Skripte generierte Komponenten) können Name und Rolle programmgesteuert bestimmt werden; Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, können programmgesteuert festgelegt werden; und Benachrichtigungen über Änderungen an diesen Elementen sind für Benutzeragenten, einschließlich unterstützender Technologien, verfügbar.
Inhalt
Was steht in den Guidelines zum Success Criterium 4.1.2 - Name, Role, Value?Was Bedeutet das Success Criterium 4.1.2 - Name, Role, Value?Warum ist es so wichtig, das Success Criterium 4.1.2 - Name, Role, Value zu beachten?Was hat das Success Criterium 4.1.2 - Name, Role, Value mit dem BFSG zu tun?Lösungen für 4.1.2 - Name, Role, Value anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 4.1.2 - Name, Role, Value?Was steht in den Guidelines zum Success Criterium 4.1.2 - Name, Role, Value?
Was Bedeutet das Success Criterium 4.1.2 - Name, Role, Value?
Success Criterion 4.1.2 (Name, Role, Value) fordert, dass für alle interaktiven Elemente auf einer Website – zum Beispiel Formulare, Schaltflächen oder Custom Controls – ihr Name (das, was sie sind), ihre Rolle (ihre Funktion) und ihr Wert (aktueller Zustand oder eingegebene Informationen) programmatisch ermittelbar sind. Das bedeutet: Screenreader und andere Hilfstechnologien müssen diese Informationen zuverlässig auslesen können. Dies erreicht man, indem man die nativen HTML-Elemente verwendet oder bei individuellen Lösungen ARIA-Attribute korrekt einsetzt.
Beispiele für diese Informationen sind:
- Name: Die Bezeichnung des Elements (z. B. Beschriftung eines Buttons)
- Rolle: Die Art/Funktion des Elements (z. B. Checkbox, Schaltfläche)
- Wert: Aktueller Status/Eingabe (z. B. ob eine Checkbox angekreuzt ist)
Oft macht man Fehler, indem man zum Beispiel ein Button als <div> ohne ARIA-Rolle und Name baut, oder ein selbst programmiertes Steuerelement keine Beschriftung oder keinen Wert übermittelt.
Warum ist es so wichtig, das Success Criterium 4.1.2 - Name, Role, Value zu beachten?
Nur wenn Name, Rolle und Wert von Steuerelementen klar und richtig maschinenlesbar ausgezeichnet sind, können Benutzer:innen mit Sehbehinderung oder anderen Einschränkungen digitale Angebote zuverlässig und selbstbestimmt bedienen. Screenreader oder Spracherkennungssoftware nutzen genau diese Angaben, um Nutzer:innen zu informieren und zu ermöglichen, mit den Elementen zu interagieren. Fehlende oder falsch angegebene Informationen führen dazu, dass wichtige Funktionen einer Website nicht nutzbar sind.
Was hat das Success Criterium 4.1.2 - Name, Role, Value mit dem BFSG zu tun?
Das BFSG (Barrierefreiheitsstärkungsgesetz) verweist auf die WCAG 2.1, und damit ausdrücklich auch auf das Kriterium 4.1.2. Wenn eine Website dieses Kriterium verletzt, ist sie nicht barrierefrei im Sinne des Gesetzes. Das bedeutet konkret: Menschen mit Behinderung können Teile der Website nicht bedienen und Sie erfüllen die gesetzlichen Anforderungen nicht – was u. a. rechtliche Konsequenzen oder behördliche Beanstandungen nach sich ziehen kann.
Lösungen für 4.1.2 - Name, Role, Value anhand von Codebeispielen
Falscher Code
<div onclick="doSomething()">Senden</div>Korrekter Code
<button type="button" onclick="doSomething()">Senden</button>Im schlechten Beispiel wird ein `<div>` für einen Button genutzt. Screenreader erkennen aber nicht, dass dies ein Button ist, es fehlt die Rolle und die Tastatursteuerbarkeit. Die gute Variante nutzt das semantisch richtige `<button>`-Element, was automatisch den Namen ("Senden"), die Rolle (Button) und den Wert bereitstellt.
Falscher Code
<input type="checkbox" role="checkbox">Korrekter Code
<label><input type="checkbox" name="subscribe"> Newsletter abonnieren</label>Das schlechte Beispiel hat zwar einen ARIA-"role", es fehlt aber der Name (Beschriftung des Elements wird nicht mitgesprochen). Das gute Beispiel gibt dem Checkbox-Element einen klaren Namen über das `<label>` und zeigt, wozu es dient.
Falscher Code
<div role="slider" tabindex="0" aria-valuenow="50"></div>Korrekter Code
<input type="range" min="0" max="100" value="50" aria-label="Lautstärke">Hier wurde ein Slider als `<div>` nachgebaut, aber ARIA nur teilweise verwendet. Viele assistive Technologien erkennen den Wert oder die Rolle nur unvollständig. Das native HTML-Element `<input type='range'>` ist dagegen vollständig zugänglich, inklusive Rolle, Name und Wert.
Wie löse ich Verstöße gegen das Success Criterium 4.1.2 - Name, Role, Value?
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.