Praxisleitfaden ARIA-Schalter beschriften
Auswahlfelder eindeutig benennen
Fehlende Namen an ARIA-Auswahlfeldern erkennen, ergänzen und gezielt nachprüfen.
aria-toggle-field-nameWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-toggle-field-name.html
Befund verstehen
Die Rolle ist vorhanden, der Name fehlt
Scanner-Signal
aria-toggle-field-name meldet .method-card [role="checkbox"] ohne zugänglichen Namen.
Technische Einordnung
- Regel
aria-toggle-field-name- Referenz
- WCAG 4.1.2
Das rechte quadratische Feld in der Docklegende hat die Rolle checkbox und den Zustand aria-checked="false". Sein inneres Zeichen ist mit aria-hidden="true" ausgeblendet. Weder aria-label noch aria-labelledby liefern eine Beschriftung.
Bedeutung im Nutzungskontext
Assistive Technik kann die Checkbox und ihren Zustand erkennen. Welche Option sie bezeichnet, bleibt jedoch offen. Ein Zustand wie „nicht ausgewählt“ beantwortet diese Frage nicht.
Namensdiagnose vor der Korrektur
Rolle: checkbox
Zustand: false
Zugänglicher Name: leer
Axe: aria-toggle-field-name verletztAuswahlfelder mit ihrer Option verbinden
Prüfen Sie wiederholte Auswahlfelder mit den tatsächlich gesteuerten Optionen und Zuständen.
- Docklegende× Befund im Beispiel
- Kartenansicht× Befund im Beispiel
- Filteransicht Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie pro Verwendung Beschriftung, Tastaturbedienung und Auswahlzustand.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Woher soll der Name kommen?
Klären Sie zuerst, welche Option das Feld steuert. Wählen Sie dann die passende Namensquelle.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Text gehört direkt zum Feld | Die Option lässt sich im Bedienelement sichtbar benennen. | Verwenden Sie verständlichen Text als Inhalt. Bei einer nativen Checkbox verbinden Sie das input mit einem label. |
| Beschriftung steht daneben | Ein sichtbarer Text benennt bereits genau diese Option. | Verweisen Sie mit aria-labelledby auf dessen eindeutige ID. Die bloße räumliche Nähe stellt keine Namensbeziehung her. |
| Nur ein Zeichen ist vorgesehen | Es gibt keinen sichtbaren Beschriftungstext, auf den sich das Feld beziehen kann. | Ein aria-label liefert einen zugänglichen Namen. Prüfen Sie zusätzlich, ob auch sehende Nutzer die Funktion verstehen; eine sichtbare Beschriftung kann dafür nötig sein. |
Fundstelle betrachten
Das namenlose Feld in der Docklegende
Der vollständige Archivkasten zeigt Überschrift, beide Bedienelemente und die zugehörigen Notizen. Die Markierung umfasst ausschließlich das rechte Auswahlfeld.
Die umgebende Überschrift benennt die Docklegende als Ganzes. Sie ist kein Name für dieses einzelne Feld. Die fiktive Vorlage legt dessen genaue Aufgabe nicht fest; für die gezeigte Namenskorrektur wird „Dockmarkierung“ als Beispielbezeichnung gewählt.
Namen ergänzen
Die Beschriftung am Auswahlfeld hinterlegen
Im Browserbeispiel erhält die vorhandene Checkbox aria-label="Dockmarkierung". Rolle, Zustand, Fokusreihenfolge und Darstellung bleiben gleich. Die Gegenüberstellung zeigt die Namenskorrektur, keine vollständige Checkbox-Implementierung; Layoutattribute sind zur Lesbarkeit ausgelassen.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
aria-label="Dockmarkierung"
In Ihrer Komponente Ersetzen Sie die Beispielbezeichnung durch die fachlich bestätigte Option. Tragen Sie sie an der Komponente ein, die das Element mit role="checkbox" tatsächlich rendert, und kontrollieren Sie das ausgelieferte HTML.
Vollständigen Code vergleichen
Vorher
<div role="checkbox" aria-checked="false" tabindex="0">
<span aria-hidden="true">◇</span>
</div>Nachher
<div role="checkbox" aria-checked="false" tabindex="0"
aria-label="Dockmarkierung">
<span aria-hidden="true">◇</span>
</div>Markierte Zeilen wurden geändert
In der Anwendung umsetzen
Name, Zustand und Bedienung zusammen prüfen
Ein verständlicher Name löst die Zuordnung. Die Komponente muss außerdem korrekt reagieren.
- 1
Benennen Sie die ausgewählte Option konkret. „Checkbox“ wiederholt lediglich die Rolle.
- 2
Halten Sie den Namen bei einem Zustandswechsel stabil; den Auswahlzustand liefert aria-checked.
- 3
Prüfen Sie bei aria-labelledby, dass die referenzierte ID existiert und den richtigen Text enthält.
- 4
Testen Sie Fokus und Leertaste sowie die tatsächliche Änderung von Auswahl und aria-checked. tabindex allein ergänzt keine Bedienlogik.
- 5
Bevorzugen Sie bei neuen einfachen Auswahlfeldern eine native Checkbox mit verbundenem label, damit Browser die grundlegende Bedienung übernehmen.
Fehlkorrekturen vermeiden
Was einen brauchbaren Namen nicht ersetzt
Nur den Zustand ergänzen
aria-checked="false" ist im Original bereits vorhanden. Es sagt aus, ob die Option ausgewählt ist, aber nicht, welche Option gemeint ist.
Eine Beschreibung als Namen behandeln
aria-describedby ergänzt Hinweise. Verwenden Sie für den Namen sichtbaren Inhalt, aria-labelledby oder aria-label.
Das innere Zeichen freigeben
Das Entfernen von aria-hidden könnte das Rautenzeichen in die Namensberechnung aufnehmen. Ein Zeichenname erklärt die Funktion der Auswahl weiterhin nicht.
Die Rolle entfernen, um den Befund loszuwerden
Dadurch verliert ein echtes Auswahlfeld seine Semantik. Reparieren Sie seine Beschriftung und prüfen Sie das Verhalten, statt die Erkennung zu umgehen.
Der Name ist gesetzt und die Regel besteht
Axe bestätigt am selben Element nach der Korrektur einen Pass für aria-toggle-field-name. Der zusätzliche Prüfablauf bestätigt den Namen „Dockmarkierung“, aria-checked="false" und tabindex="0". Die unveränderte Darstellung allein könnte diese Korrektur nicht belegen.
Im Beispiel dokumentiert
Gelöst
aria-label="Dockmarkierung" benennt die Checkbox. Die Darstellung und der Auswahlzustand bleiben unverändert.
Was Sie zusätzlich beurteilen müssen
Gelöst ist der fehlende Name an dieser Fundstelle. Die fiktive Vorlage erhält hier keine neue Bedienlogik; andere Archivfehler und die vollständige Nutzbarkeit sind damit nicht geprüft.
Was der Scan erkennt und was Sie beurteilenPrüfauftrag für Ihre Umsetzung
- Öffnen Sie die veröffentlichte Seite und kontrollieren Sie den berechneten Namen im Accessibility-Baum.
- Führen Sie die Regel erneut aus und ordnen Sie das Ergebnis derselben Checkbox zu.
- Prüfen Sie mit assistiver Technik, ob Name und Auswahlzustand im tatsächlichen Bedienablauf verständlich sind.
Namensdiagnose nach der Korrektur
Rolle: checkbox
Zustand: false
Zugänglicher Name: Dockmarkierung
Axe: aria-toggle-field-name bestanden
Tastaturverhalten: gesondert prüfenPrüfgrenzen kennen
Was der Scan erkennt und was Sie beurteilen
Die Regel prüft die Namensgebung von ARIA-Auswahlfeldern. Sie bewertet weder die fachliche Benennung noch den gesamten Nutzerweg.
Automatisch prüfbar
- Fehlende Namen bei unterstützten Rollen wie checkbox, radio und switch erkennen.
- Die betroffene Stelle mit Selektor und Kontext dokumentieren.
- Nach einer Änderung dieselbe Namensregel am Ziel erneut prüfen.
Im Kontext zu entscheiden
- Bestätigen, welche Option das Bedienelement fachlich bezeichnet.
- Sichtbare Beschriftung und zugänglichen Namen auf verständliche Übereinstimmung prüfen.
- Fokus, Tastaturbedienung und gemeldeten Zustand beim Umschalten testen.