Praxisleitfaden Erforderliche ARIA-Attribute
Fehlende ARIA-Zustände ergänzen
Prüfen Sie, welche Zustandsinformation Ihrer Checkbox fehlt und wie Sie sie ergänzen.
aria-required-attrWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-required-attr.html
Befund verstehen
Eine Checkbox ohne definierten Zustand
Scanner-Signal
aria-required-attr meldet an „Grenzmarke“ das fehlende Pflichtattribut aria-checked.
Technische Einordnung
- Regel
aria-required-attr- Referenz
- WCAG 4.1.2
Das Rollenregister einer Kurköln-Kalibrierseite enthält ein div mit role="checkbox". Sein Text liefert eine Beschriftung, doch der für diese Rolle erforderliche Auswahlzustand fehlt. Die Regel prüft die Attribute der Rolle, nicht die sichtbare Gestaltung des Feldes.
Bedeutung im Nutzungskontext
Assistive Technik erhält keine ausdrücklich gesetzte Information darüber, ob die Grenzmarke ausgewählt ist. Die sichtbare Beschriftung beantwortet diese Frage ebenfalls nicht.
Diagnose am Element
Rolle: checkbox
Beschriftung: Grenzmarke
aria-checked: fehlt
Axe: Required ARIA attribute not present: aria-checkedCheckboxzustände bei jeder Instanz prüfen
Eine Komponentenbindung kann den Auswahlzustand mehrfach auslassen. Die Korrektur muss zur tatsächlichen Auswahl jeder Instanz passen.
- Filterseite× Befund im Beispiel
- Auswahlseite× Befund im Beispiel
- Natives Formularfeld Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie den Anfangszustand und die Zustandswechsel jeder betroffenen Checkbox nach erneutem Laden.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Information braucht dieses Element?
Klären Sie zuerst die Funktion der Grenzmarke. Ein Pflichtattribut muss den tatsächlichen Zustand wiedergeben.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Die Checkbox ist beabsichtigt | Die Grenzmarke lässt sich auswählen und wieder abwählen. | Setzen Sie aria-checked passend zum aktuellen Zustand. Das gezeigte Beispiel definiert den Ausgangszustand ausdrücklich als nicht ausgewählt: false. |
| Ein natives Kontrollfeld ist möglich | Es handelt sich um eine gewöhnliche Auswahl mit zwei Zuständen. | Verwenden Sie bevorzugt ein beschriftetes input type="checkbox". Prüfen Sie dabei die bestehende Datenbindung und Gestaltung; der Browser stellt die Checkbox-Semantik bereit. |
| Die Grenzmarke ist nur Text | Die Anwendung bietet an dieser Stelle gar keine Auswahl an. | Entfernen Sie die unzutreffende Checkbox-Rolle. Ein erfundener Auswahlzustand würde die falsche Funktion weiterhin ankündigen. |
Fundstelle zuordnen
Die Grenzmarke im vollständigen Rollenregister
Der Ausschnitt zeigt die Überschrift, den Hinweis auf den unvollständigen Export und alle Rollenfelder. Die Markierung betrifft ausschließlich die beschriftete Grenzmarke links; die übrigen Felder haben eigene Prüfthemen.
Das Register beschreibt verlorene Zustände beim Export. Bei „Grenzmarke“ ist die Checkbox-Rolle erhalten geblieben, während aria-checked fehlt. Dieser Unterschied wird erst durch die HTML-Diagnose sichtbar.
Zustand ergänzen
Die vorhandene Rolle vervollständigen
Für dieses Beispiel wird die Grenzmarke als nicht ausgewählt definiert. Die Korrektur ergänzt nur aria-checked="false" am vorhandenen Element. Text und Darstellung ändern sich dadurch nicht; eine vollständige Bedienlogik ist damit noch nicht implementiert.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
<div role="checkbox">Grenzmarke</div>- Kommt hinzu
<div role="checkbox" aria-checked="false"> Grenzmarke </div>
In Ihrer Komponente Leiten Sie aria-checked aus demselben Anwendungszustand ab wie die sichtbare Auswahl. Ist das Element bereits ausgewählt, muss der Wert true sein. Hinterlegen Sie keinen festen false-Wert für alle Situationen.
Vollständigen Code vergleichen
Vorher
<div role="checkbox">Grenzmarke</div>Nachher
<div role="checkbox" aria-checked="false">
Grenzmarke
</div>Markierte Zeilen wurden geändert
Umsetzung absichern
Zustand und Bedienung zusammenhalten
Die ergänzte Eigenschaft gehört in die Komponente, die auch die Auswahl verwaltet.
- 1
Lesen Sie den gespeicherten Zustand vor dem ersten Rendern aus und bilden Sie ihn im gerenderten Attribut ab.
- 2
Aktualisieren Sie sichtbare Auswahl, gespeicherten Wert und aria-checked gemeinsam bei jeder Änderung.
- 3
Prüfen Sie bei einer selbst gebauten Checkbox den Tastaturfokus und das Umschalten mit der Leertaste zusätzlich.
- 4
Kontrollieren Sie auch zurückgesetzte Formulare und erneut geladene Daten: Der ausgegebene Zustand muss weiterhin zur Auswahl passen.
Fehlkorrekturen vermeiden
Vorhanden bedeutet noch nicht zutreffend
aria-label als Ersatz ergänzen
Die Grenzmarke hat bereits eine Beschriftung. Ein zusätzlicher Name liefert keinen Auswahlzustand und ersetzt aria-checked nicht.
Ein leeres Attribut setzen
aria-checked="" drückt keinen gültigen Auswahlzustand aus. Prüfen Sie neben dem Vorhandensein auch den Attributwert.
false fest eintragen
Ein unveränderlicher Wert kann den Befund beseitigen und trotzdem eine ausgewählte Checkbox als nicht ausgewählt melden.
Die Rolle als Bedienlogik verstehen
role="checkbox" macht aus einem div allein noch kein bedienbares Kontrollfeld. Fokus, Aktivierung und Zustandswechsel benötigen eine gesonderte Umsetzung und Prüfung.
Der Pflichtattribut-Befund ist behoben
Der erneute Axe-Lauf bewertet dieselbe Grenzmarke für aria-required-attr als bestanden. Die Laufzeitkopie enthält jetzt aria-checked="false". Der ursprüngliche Seiteninhalt wurde nicht verändert.
Verifiziert ist die Pflichtattribut-Regel an dieser Fundstelle. Weder die Bedienbarkeit des exportierten Registers noch vollständige WCAG-Konformität sind damit nachgewiesen.
Ergebnis am selben Element
aria-checked: false
Definierter Zustand: nicht ausgewählt
Axe: aria-required-attr bestanden
Sichtbare Darstellung: unverändert
Bedienung und Zustandswechsel: zusätzlich prüfenPrüfgrenzen kennen
Was der Scan über die Checkbox aussagt
Ein fehlendes Pflichtattribut ist maschinell erkennbar. Ob die Grenzmarke richtig funktioniert, braucht weitere Prüfung.
Automatisch prüfbar
- Fehlende erforderliche ARIA-Attribute an der geprüften Rolle erkennen.
- Den Befund dem betroffenen Element und seinem Seitenkontext zuordnen.
- Das ergänzte Pflichtattribut am selben Element erneut prüfen.
Im Kontext zu entscheiden
- Entscheiden, ob die Checkbox-Rolle die tatsächliche Funktion beschreibt.
- Den ausgegebenen Zustand mit sichtbarer Auswahl und Anwendungsdaten vergleichen.
- Fokus, Tastaturbedienung und verständliche Zustandsausgabe über den gesamten Bedienweg prüfen.