Name, Rolle, Wert (WCAG-Kriterium 4.1.2)

Was bedeutet dieses Kriterium und was sind die häufigsten Barrieren?

Was bedeutet das Kriterium?

Interaktive Elemente sollen programmatisch ermittelbare Namen, Rollen und Werte (falls anwendbar, z. B.: bei einer Checkbox „ausgewählt“ oder „nicht ausgewählt“) haben.

Warum und für wen ist das Kriterium wichtig?

Standard-HTML-Bedienelemente wie zum Beispiel Links oder Buttons haben einen Namen und eine Rolle. Manche Bedienelemente haben auch Werte bzw. Zustände wie Eingabefelder oder Checkboxes. Diese Eigenschaften sind per Screenreader für blinde Personen zugänglich – das heißt, es wird ihnen kommuniziert, was sie mit dem Bedienelement machen können. Ein Beispiel: Eine Checkbox in einem Formular hat den Namen „Ich möchte den Newsletter abonnieren“. Die Rolle ist, dass es eine Checkbox ist. Der Wert ist „unchecked“, wenn es noch nicht ausgewählt ist. Ist der Wert „checked“ bedeutet das, dass die Checkbox ausgewählt ist.

Bei Standard-HTML-Elementen werden diese Infos automatisch für Screenreader mitgeliefert. Falls nicht dafür vorgesehene Elemente (– wie das div- oder das span-Element) mithilfe von JavaScript und CSS umfunktioniert werden, um das Aussehen und die Funktion von Bedienelementen nachzuahmen, müssen diese mit WAI-ARIA (externer Link) angereichert werden, damit diese Eigenschaften auch für Screenreader-Nutzer:innen zugänglich sind. Dies betrifft auch Komponenten wie Tabpanels, Akkordeons, Schieberegler etc. Für blinde Nutzer:innen ist die Funktion dieser Elemente sonst nicht nachvollziehbar. Wenn die Zustände bzw. Werte ebenfalls nicht zur Verfügung stehen, sind diese auch nicht bedienbar.

Was sind die häufigsten Fehler bei diesem Kriterium und wie können sie behoben bzw. vermieden werden?

Control (z. B. Buttons, Eingabefelder etc.) haben keine programmatisch erfassbare Beschriftung (keinen Namen):

Ohne entsprechende Beschriftungen wird die Funktion von Bedienelementen für Screenreader-Nutzer:innen nicht entsprechend kommuniziert. Hier sind – abhängig vom jeweiligen Control-Typ – Labels zu erwähnen. Dabei können bei den meisten Controls entweder Labels verlinkt werden (label-Tag und for-Attribut bzw. aria-labelledby) oder auch direkt definiert werden (aria-label).
Siehe auch: Web Accessibility Tutorials: Labeling Controls (externer Link)

Buttons (und andere Controls) sind nicht als solche ausgezeichnet:

Das tritt auf, wenn ungeeignete HTML-Elemente (bspw. div- oder span-Elemente) als Controls eingesetzt werden. Um dies zu vermeiden, sollten möglichst die für die entsprechenden Controls vorgesehenen semantischen HTML-Elemente (wie bspw. button etc.) genutzt werden. Falls dies nicht möglich ist, mit ARIA-roles nachbessern und die Funktion darüber definieren. Dabei auf den korrekten Einsatz von WAI-ARIA achten.
Siehe dazu auch: WAI-ARIA Roles (externer Link)

Nicht übermittelte Zustände (fehlende Werte):

ARIA-Attribute (externer Link) wie

aria‑expanded (eingeklappt oder ausgeklappt),
aria‑pressed (für Toggle-Buttons: gedrückt, nicht gedrückt etc.),
aria‑current (um das aktuelle Element einer Gruppe verwandter Elemente zu kennzeichnen),
aria‑selected (kennzeichnet die ausgewählten Elemente in Widgets mit Einzel- oder Mehrfachauswahl),
aria‑checked (zeigt den „ausgewählten“ Status von Kontrollkästchen etc. an)

fehlen oder werden falsch gesetzt (z. B. bei einem ausgeklappten Element bleibt aria-expanded="false" im geöffneten Zustand).

Name-Rolle-Wert inkonsistent oder unvollständig / ARIA Attribute auf falschen Elementen:

Wenn ARIA-Attribute inkonsistent oder falsch platziert sind, erhalten assistierende Technologien wie Screenreader unvollständige oder widersprüchliche Informationen. Typische Beispiele:

aria‑label auf generischen div/span ohne passende role
ARIA‑Attribute werden falsch eingesetzt bei Elementen, bei denen diese nicht erlaubt sind
komplexe Komponenten (carousel, tabs, combobox, listbox, accordion) werden mit divs nachgebaut und mit ARIA angereichert, aber ohne komplette Patterns des ARIA Authoring Practices Guide (APG) (externer Link) umzusetzen, wodurch Name, Rolle und Wert nicht vollständig vermittelt werden