WCAG 4.1.2: Name, Rolle, Wert

Für jedes Bedienelement müssen Name und Rolle programmatisch ermittelbar sein; Zustände und Werte müssen programmatisch setzbar sein, und über Änderungen müssen assistive Technologien benachrichtigt werden. Kurz: Die Maschine muss wissen, was ein Element ist, wie es heißt und in welchem Zustand es sich befindet. (Englisch: Name, Role, Value.)

Was verlangt das Kriterium?

Die drei Bausteine am Beispiel eines Aufklapp-Buttons:

• Name: „Filter anzeigen“ – aus Textinhalt, <label> oder aria-label (mit sichtbarem Text darin).
• Rolle: „Schalter/Button“ – aus dem Element (<button>) oder notfalls role.
• Wert/Zustand: „ausgeklappt/eingeklappt“ – aus aria-expanded, das bei jeder Änderung aktualisiert wird.

Mit nativem HTML ist das Kriterium fast automatisch erfüllt: <button>, <a href>, <input> mit <label>, <select>, <details> liefern Name, Rolle und Zustand frei Haus. Verstöße entstehen beim Nachbau: das klickbare <div> ohne Rolle, der Custom-Toggle ohne Zustand, das gestylte Dropdown, das nur optisch offen ist.

Wen betrifft es besonders?

Alle Nutzer assistiver Technologien – das Kriterium ist deren Existenzgrundlage: Screenreader sagen an, was sie über Name/Rolle/Zustand wissen; Sprachsteuerung und Switch-Systeme adressieren Elemente über genau diese Daten.

Richtig & falsch im Code

<!-- Falsch: Toggle ohne Rolle, Name unklar, Zustand nur optisch -->
<div class="toggle active" onclick="toggleFilter()"></div>

<!-- Richtig: natives Element + gepflegter Zustand -->
<button type="button" aria-expanded="false" aria-controls="filter-panel">
  Filter anzeigen
</button>
<div id="filter-panel" hidden>…</div>

// Zustand bei jeder Änderung mitführen – sonst lügt die Ansage
btn.addEventListener('click', () => {
  const offen = panel.hidden;
  panel.hidden = !offen;
  btn.setAttribute('aria-expanded', String(offen));
});

Die Werkzeuge dafür erklärt Rollen, States & Properties; wann man sie besser gar nicht braucht, die erste Regel von ARIA.

So testest du es

1. Automatisch: axe findet fehlende Namen/Rollen zuverlässig (Regeln wie „button-name“, „aria-toggle-field-name“).
2. DevTools: Accessibility-Panel öffnen – stimmen Name, Rolle und Zustand jedes Widgets mit dem überein, was es visuell darstellt?
3. Screenreader-Probe: Mit NVDA jedes Custom-Widget bedienen: Wird der Zustandswechsel („ausgeklappt“) angesagt?

Verwandte Themen

• Die erste Regel von ARIA – natives HTML zuerst
• Rollen, States & Properties – wenn ARIA doch nötig ist
• 4.1.3 Statusmeldungen – Benachrichtigung ohne Fokuswechsel