Stufe A · WCAG 2.0

4.1.2 Name, Rolle, Wert

Jedes Bedienelement gibt Namen, Rolle und aktuellen Zustand an Hilfsmittel weiter.

Teilweise automatisch Manche Verstöße sind erkennbar, der Rest braucht Bewertung.

Woran es in der Praxis scheitert

Ein div mit Klick-Handler als Button, angesagt als nichts. Eine eigene Checkbox, die nie meldet, ob sie angehakt ist.

Wie man es repariert

Nehmen Sie zuerst native Elemente. Wo das nicht geht, setzen Sie das ARIA-Muster vollständig um — Rolle, Name, Zustände und Tastaturverhalten zusammen. Ein halbes Muster ist schlimmer als keines.

Auf einen Blick

Stufe: Stufe A — das Minimum. Ein Verstoß hier macht etwas meist unmöglich, nicht bloß mühsam.
Prinzip: Robust
Richtlinie: 4.1 Kompatibel
Neu in: WCAG 2.0
EN 301 549: 9.4.1.2
Englische Bezeichnung: Name, Role, Value
Automatische Prüfung: Teilweise automatisch

Offizielle Definition beim W3C lesen

So prüfen Sie es von Hand

Öffnen Sie bei jedem eigenen Bedienelement den Accessibility-Baum des Browsers (Entwicklertools → Barrierefreiheit): Hat es einen Namen, die richtige Rolle und seinen aktuellen Zustand?
Bedienen Sie es und beobachten Sie den Zustand: Ein geöffnetes Menü meldet sich als erweitert, ein gewählter Tab als ausgewählt, ein Schalter als ein oder aus.
Hören Sie sich die wichtigsten Bedienelemente mit einem Screenreader an – in den Warenkorb, Menge, Größe, Zahlungsart.
Nehmen Sie, wo immer es geht, native Elemente: button, input type="checkbox" und select bringen Name, Rolle und Zustand mit.

Im Code

Nicht erfüllt

<div class="switch on" onclick="toggle(this)"></div>

Erfüllt

<button type="button" role="switch" aria-checked="true"
        onclick="toggle(this)">Newsletter</button>

<!-- toggle() setzt neben der Klasse auch aria-checked um -->

Teilweise automatisch

Wie weit eine automatische Prüfung kommt

Ein Werkzeug findet hier einen Teil der Verstöße und sieht den Rest nicht. Ein sauberes automatisches Ergebnis heißt: die vorhandenen Prüfungen haben nichts gefunden — nicht, dass das Kriterium erfüllt ist. Genau diese Lücke lässt einen grünen Scan wie eine barrierefreie Website aussehen, und genau dort arbeiten der Tastatur-Agent, die Agenten in Entwicklung und ein Mensch weiter.

Ein fehlender Name oder eine ungültige Rolle wird automatisch gefunden, und bei einem Crawl aus einem Konto werden Bedienelemente auf einer Seite je Template bedient, um zu sehen, ob ihr Zustand mitgeht. Ob die Rolle beschreibt, was das Element wirklich tut, ist eine Bewertung.

Regeln, die dieses Kriterium prüfen

area-altAktive <area>-Elemente müssen einen Alternativtext besitzen.
aria-allowed-attrUnzulässiges ARIA-Attribut
aria-braille-equivalentaria-braille Attribute müssen ein non-braille Äquivalent haben.
aria-command-nameARIA Befehle müssen einen zugänglichen Namen (accessible name) besitzen.
aria-conditional-attrARIA-Attribute müssen entsprechend der Rolle des Elements verwendet werden.
aria-deprecated-roleVeraltete ARIA-Rollen dürfen nicht verwendet werden.
aria-hidden-bodyAria-hidden='true' darf nicht für den <body> des Dokumentes verwendet werden.
aria-hidden-focusFokussierbares Element in aria-hidden
aria-input-field-nameARIA-Eingabefeld ohne Namen
aria-prohibited-attrElemente dürfen nur erlaubte ARIA-Attribute verwenden.
aria-required-attrPflicht-ARIA-Attribut fehlt
aria-rolesVerwendete ARIA-Rollen müssen gültigen Werten entsprechen.
aria-tab-nameARIA tab nodes must have an accessible name
aria-toggle-field-nameARIA-toggle-Felder benötigen einen zugänglichen Namen (accessible name).
aria-tooltip-nameARIA-tooltip-Knoten benötigen einen zugänglichen Namen (accessible name).
aria-valid-attr-valueUngültiger ARIA-Wert
aria-valid-attrVerwendete ARIA-Attribute müssen gültigen Namen entsprechen.
button-nameButton ohne erkennbaren Text
duplicate-id-ariaIDs, welche in ARIA und Lables genutzt werden, müssen einzigartig sein.
frame-title-uniqueFrames müssen ein einzigartiges title-Attribut besitzen.
frame-titleiframe ohne Titel
input-button-nameEingabe-Button ohne Text
input-image-altBild-Button ohne Alternativtext
labelFormularfeld ohne Beschriftung
link-nameLink ohne erkennbaren Text
nested-interactiveVerschachtelte Bedienelemente
select-nameAuswahlliste ohne Beschriftung
summary-namesummary-Elemente müssen einen erkennbaren Text haben

Die Regel-IDs stammen aus axe-core (Version 4.14.0), der Open-Source-Engine, auf der unser Scan läuft, und von unserem Tastatur-Agenten – so heißen sie auch in einem Bericht oder im CI-Log. Eine unterstrichene ID hat hier eine eigene Seite.

Alle Regeln erklärt

Wo es besonders zählt

Leitfäden, in denen dieses Kriterium zu den ersten Prüfpunkten gehört.

Weiterlesen

Accessibility Tree
Die Struktur, die der Browser aus dem DOM ableitet, mit Rolle, Name und Zustand jedes Elements; Screenreader und andere assistive Technologien lesen aus ihr.
Zugänglicher Name (Accessible Name)
Der Name, den ein Element für assistive Technologien hat – vom Browser berechnet aus Textinhalt, label, alt, aria-label oder aria-labelledby.
ARIA (WAI-ARIA)
W3C-Spezifikation mit Rollen, Zuständen und Eigenschaften, die assistiven Technologien Bedeutung übermitteln, wo HTML allein nicht reicht; falsch eingesetzt macht sie Seiten schlechter bedienbar.
aria-allowed-attr
Die axe-Regel aria-allowed-attr meldet ARIA-Attribute, die die Rolle nicht unterstützt, etwa aria-selected am Button. Lösung mit Codebeispiel.
aria-input-field-name
Die axe-Regel aria-input-field-name meldet eigene Felder mit ARIA-Rollen wie combobox oder textbox ohne Namen. Die Lösung – mit Codebeispiel.
aria-required-attr
Die axe-Regel aria-required-attr meldet Rollen ohne Pflichtzustand, etwa einen Schalter ohne aria-checked. Ursachen und Lösung mit Codebeispiel.
aria-valid-attr-value
Die axe-Regel aria-valid-attr-value meldet ARIA-Attribute mit unzulässigem Wert, etwa aria-expanded="yes". Ursachen und Lösung mit Codebeispiel.
button-name
Die axe-Regel button-name meldet Buttons ohne zugänglichen Namen – meist Icon-Buttons. So benennen Sie sie mit Text oder aria-label, mit Codebeispiel.
frame-title
Die axe-Regel frame-title meldet ein iframe ohne zugänglichen Namen. Warum Screenreader Einbettungen dann nicht unterscheiden – Lösung mit Codebeispiel.
input-button-name
Die axe-Regel input-button-name meldet Eingabe-Buttons (submit, reset, button) ohne Text. Warum value="" sie leert – mit Codebeispiel zur Lösung.
input-image-alt
Die axe-Regel input-image-alt meldet ohne Textalternative. Benennen Sie die Aktion, nicht das Bild – mit Codebeispiel.
label
Die axe-Regel label meldet Eingabefelder ohne zugänglichen Namen. Warum ein Platzhalter keine Beschriftung ist und wie Sie es beheben – mit Codebeispiel.
link-name
Die axe-Regel link-name meldet Links ohne zugänglichen Namen – Icon-Links, Bildlinks ohne alt, leere Anker. Die Lösung mit Codebeispiel.
select-name
Die axe-Regel select-name meldet Auswahllisten ohne zugänglichen Namen. Warum die gewählte Option keine Beschriftung ist – mit Codebeispiel.

Finden Sie heraus, welche Kriterien Ihre Website verfehlt

Wir prüfen bis zu 100 Seiten gegen WCAG 2.2 AA, schicken den Tastatur-Agenten durch die Seite, die Sie benennen, und senden Ihnen den Bericht per E-Mail — einmal, kostenlos, ohne Bedingungen.

Kostenlosen Scan anfordern So testet der Agent

Bericht innerhalb eines Werktags.