Dieses WCAG-Kriterium verlangt, dass alle Bedienelemente auf einer Webseite (z.B. Buttons, Links, Formularelemente) so gestaltet sein müssen, dass Hilfstechnologien (z. B. Screenreader) erkennen können:
- Name: wie heißt das Element oder was tut es? (z. B. „Absenden“, „Suchfeld“)
- Rolle: was ist das für ein Element? (z. B. Button, Link, Eingabefeld, Checkbox)
- Wert / Zustand: welchen Wert oder Zustand hat es gerade, bzw. kann verändert werden? (z. B. „ausgewählt“, „nicht ausgewählt“, „aktiv“, „inaktiv“). Wenn sich etwas verändert (z. B. ein Element wird aktiviert, ein Kontrollkästchen geändert), soll die Änderung auch für assistive Technologie(n) sichtbar sein.
Name, Rolle und Wert bzw. Zustand müssen also programmatisch bestimmt sein; also im Code so bereitgestellt, dass Hilfstechnologien darauf zugreifen können.
Tipps und Infos zur Umsetzung des WCAG-Kriteriums 4.1.2
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriteriums 4.1.2:
- Verwende native HTML-Elemente (z. B. <button>, <input>, <select>, <a>) so, wie sie vorgesehen sind. Damit sind die semantischen Informationen wie Name, Rolle und Wert bzw. Zustand oft schon abgebildet.
- Wo nötig, nutze ARIA-Attribute, insbesondere: role=“…“, um die Rolle eines Elements zu beschreiben, wenn das ein Element diese nicht passend liefert; aria-label oder aria-labelledby, um einen Namen bereitzustellen, besonders wenn kein sichtbarer Label-Text existiert; aria-valuenow, aria-checked, aria-expanded etc., um Werte bzw. Zustände anzugeben.
- Achte darauf, dass die Labels für Formularelemente korrekt mit den Eingabefeldern verbunden sind (z. B. <label for=“…“> in HTML).
- Wenn du eigene Komponenten baust (z. B. eigene Buttons, Dropdowns, Schiebeleisten), stell sicher, dass: die Komponente sich an Standards orientiert; Name, Rolle und Status über den Code abrufbar und steuerbar sind; Zustandsänderungen auch mitgeteilt werden an assistive Technologien.
- Teste mit Screenreadern und weiteren Hilfsmitteln: prüfe, ob du ohne Sicht auf die Seite erkennen kannst, was ein Element ist, wie es heißt, was es macht und wie sein aktueller Zustand ist (z. B. „ausgewählt / nicht ausgewählt“).
- Vermeide Elemente, die visuell wie Buttons oder Links aussehen, aber in HTML als <div> oder <span> implementiert sind, ohne Rolle oder Name. Das führt häufig zu Barrieren.
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 4.1.2 Name, Rolle, Wert.