- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 128 / 193
4.1.2 Name, Rolle, Wert
Jedes Bedienelement braucht einen Namen und eine Rolle im Markup, sonst kann assistive Technologie nicht sagen, was es ist.
/ Was es verlangt
Assistive Technologie schaut nicht auf den Bildschirm. Sie fragt den Browser, wie jedes Bedienelement heißt, was für ein Bedienelement es ist und in welchem Zustand es sich befindet. Das Kriterium verlangt, dass alle drei Angaben für jede Komponente der Benutzeroberfläche im Code verfügbar sind: ein Name, eine Rolle und jeder Zustand oder Wert, den der Nutzer ändern kann, wobei Änderungen gemeldet werden, sobald sie eintreten. Ohne sie sagt ein Screenreader „Schaltfläche“ und nichts weiter oder gar nichts, und eine Sprachsteuerung kann das Bedienelement nicht ansprechen.
Native HTML-Bedienelemente, die wie spezifiziert eingesetzt werden, erfüllen das von Haus aus: ein button-Element mit Text, ein input mit label, ein Link mit Inhalt. Das Kriterium greift bei dem, was Autoren selbst bauen, etwa einem div, das auf Klicks reagiert, einem eigenen Dropdown oder einem Akkordeon. Diese brauchen eine Rolle, einen zugänglichen Namen und Zustandsattribute wie aria-expanded oder aria-checked, die das Skript aktuell hält. Ausnahmen nennt das Kriterium nicht. Ein Bedienelement, das mit der Maus funktioniert und im Accessibility Tree fehlt, fällt durch.
/ Woran Seiten scheitern
- Eine Schaltfläche enthält nur ein Symbol und hat keinen Text, kein aria-label und kein title.
- Ein div oder span mit Klick-Handler verhält sich wie eine Schaltfläche und hat keine Rolle.
- Ein Textfeld hat kein label-Element, kein aria-label und kein aria-labelledby.
- Ein Akkordeon oder eine Menüschaltfläche öffnet und schließt sich, ohne dass sich aria-expanded jemals ändert.
- Ein aria-labelledby-Attribut nennt eine id, die es auf der Seite nicht gibt, sodass der berechnete Name leer ist.
/ So prüfen Sie es selbst
- Gehen Sie die Seite mit der Tabulatortaste durch, während ein kostenloser Screenreader wie NVDA läuft. An jedem Halt sollten Sie einen Namen, eine Rolle und, wo zutreffend, einen Zustand hören.
- Untersuchen Sie jedes Bedienelement im Bereich Accessibility der Entwicklerwerkzeuge des Browsers und lesen Sie Name, Rolle (Role) und Zustandseigenschaften ab.
- Bedienen Sie jedes selbst gebaute Widget: Akkordeon öffnen, Schalter umlegen, Option wählen. Prüfen Sie, ob sich der im Accessibility Tree angezeigte Zustand mitändert.
- Lassen Sie eine kostenlose Browsererweiterung wie axe DevTools oder WAVE laufen, um Bedienelemente ohne Namen aufzulisten, und bestätigen Sie die Funde von Hand.
- Suchen Sie im Quelltext nach aria-labelledby, aria-describedby und aria-controls und bestätigen Sie, dass jede darin genannte id existiert.
/ So beheben Sie es
- Greifen Sie zuerst zum nativen Element: button für Aktionen, a mit href für Navigation sowie input, select und textarea für Daten.
- Benennen Sie Symbolschaltflächen mit aria-label oder mit visuell verstecktem Text in der Schaltfläche, und geben Sie jedem iframe ein title-Attribut.
- Verbinden Sie jedes Feld über for und id mit einem label-Element, oder nutzen Sie aria-labelledby, wo ein sichtbarer Text bereits als Beschriftung dient.
- Setzen Sie bei eigenen Widgets die Rolle und halten Sie aria-expanded, aria-checked oder aria-selected im Gleichschritt mit dem, was das Widget zeigt, im selben Skript, das es ändert.
- Setzen Sie aria-hidden="true" auf nichts, das fokussierbare Elemente enthält, und geben Sie einem geöffneten Dialog aria-modal="true" und einen Namen.
/ Was unser Scanner prüft
Die statische Analyse zählt Felder ohne aria-label, aria-labelledby, title oder passendes label for. In der gerenderten Seite melden unsere Regeln leere zugängliche Namen, ARIA-Verweise auf fehlende ids, fokussierbare Inhalte unter aria-hidden, iframes ohne Titel sowie Dialoge, Comboboxen und Akkordeons ohne Zustandsattribute. axe und HTML_CodeSniffer ergänzen Schaltflächen, Links und Felder ohne Namen sowie ungültige ARIA-Werte. Nichts bedient ein Widget, Zustandsänderungen bleiben also ungeprüft.
/ Wer es verletzt, nach unseren eigenen Messungen
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Was ist ein zugänglicher Name?
Das ist der Text, den ein Browser assistiver Technologie als Namen eines Elements bereitstellt. Der Browser berechnet ihn in fester Reihenfolge: zuerst aria-labelledby, dann aria-label, dann die native Quelle wie ein label-Element, das alt-Attribut oder der Text in einer Schaltfläche oder einem Link, zuletzt das title-Attribut. Ein Screenreader sagt ihn zusammen mit der Rolle an, etwa „Suchen, Schaltfläche“.
Brauche ich ARIA, um Name, Rolle, Wert zu erfüllen?
Oft nicht. Native HTML-Elemente bringen bereits eine Rolle mit, beziehen ihren Namen aus Inhalt oder Beschriftung und melden ihren Zustand selbst. ARIA wird gebraucht, wenn Sie ein Bedienelement bauen, das HTML nicht bietet, oder wenn ein natives Bedienelement keinen sichtbaren Text hat, der es benennt. ARIA an einem Element, das sich nicht wie die behauptete Rolle verhält, macht es schlimmer.
Warum sagt ein Screenreader auf meiner Seite nur „Schaltfläche“?
Weil die Schaltfläche eine Rolle und keinen zugänglichen Namen hat. Die übliche Ursache ist eine Symbolschaltfläche: ein svg oder ein Hintergrundbild in einem button-Element ohne Text. Ergänzen Sie ein aria-label, das sagt, was die Schaltfläche tut, oder setzen Sie visuell versteckten Text hinein. Ist das Symbol ein img-Element, geben Sie ihm einen Alternativtext, der dann die Schaltfläche benennt.