WCAG und ARIA
ARIA hilft nur, wenn sie stimmt
Rolle, Attributname, Pflichtzustand: drei Stellen an einer Checkbox.
WCAG 4.1.2 · WAI-ARIA
WCAG prüft das Ziel. ARIA beschreibt Signale.
Ein zugänglicher Name, die richtige Rolle und ein aktueller Zustand müssen bei assistiven Technologien ankommen. Der kürzeste verlässliche Weg beginnt mit HTML.
Entscheidungskarte
Eine Checkbox, zwei technische Wege
Schematische Darstellung des Semantikflusses
Name und Rolle ermittelbar; Zustand setzbar; Änderungen mitgeteilt.
Rollen, Zustände, Eigenschaften und ihre zulässigen Beziehungen.
HTML übernimmt den Vertrag
Markup:<input type="checkbox"> mit sichtbarem <label>
- Nameaus dem Label
- Rollecheckbox
- Zustandaus checked
- BedienungFokus + Leertaste
Browser und Plattform bilden das Kontrollfeld ab.
Sie erfüllen den Vertrag selbst
Semantik:role="checkbox" · aria-checked="true"
- Namesichtbarer Text oder ARIA
- Rollegültiger ARIA-Wert
- Zustandbei jeder Änderung synchron
- BedienungFokus + Tasten per Code
Die Rolle allein erzeugt keine Bedienung.
- Name
- Grenzmarke
- Rolle
- Kontrollfeld
- Zustand
- ausgewählt
WCAG 4.1.2 bewertet dieses Ergebnis und die Mitteilung jeder Zustandsänderung.
Die Rollen-Zusage
ARIA kommuniziert. Ihr Code verhält sich.
Mit role="checkbox" versprechen Sie die erwartete Checkbox-Bedienung. Der Browser ergänzt sie bei einem div nicht automatisch.
- „Das ist ein Kontrollfeld.“
- „Es heißt Grenzmarke.“
- „Es ist ausgewählt.“
- Tab-Fokus ist erreichbar.
- Leertaste ändert den Zustand.
- Anzeige und ARIA bleiben synchron.
Prüfpfad
Vier Ebenen, ein konsistentes Ergebnis
- 01Markup
Existieren Rolle und Attribute? Sind Namen und Werte gültig?
- 02Accessibility Tree
Zeigen die Entwicklerwerkzeuge Name, Rolle und aktuellen Zustand?
- 03Tastatur
Erreicht Tab das Element? Ändert die erwartete Taste den Zustand?
- 04Synchronität
Wechseln sichtbare Anzeige und programmatischer Zustand gemeinsam?
Prüfen Sie beide Zustände. Ein statisch korrektes aria-checked="false" wird falsch, sobald die sichtbare Checkbox wechselt und das Attribut stehen bleibt.
Primärquellen
- WCAG 2.2: Name, Role, Value Prüfziel und Hinweise zu nativen Controls
- ARIA APG: Read Me First Warum eine Rolle auch eine Verhaltenszusage ist
- ARIA APG: Checkbox Pattern Name, aria-checked und Leertasten-Bedienung
Aus dem Prüfbericht
Drei Befunde an einem Element
Kritisch Eine erfundene Rolle Regel aria-roles
role="auswahl" gibt es in ARIA nicht. Nehmen Sie eine definierte Rolle oder besser gleich das native Element.
Kritisch Ein Tippfehler im Attributnamen Regel aria-valid-attr
aria-labl kennt kein Browser, der Name bleibt leer. Ein Buchstabe mehr, und die Beschriftung kommt an.
Kritisch Der Rolle fehlt ihr Pflichtzustand Regel aria-required-attr
role="checkbox" verlangt aria-checked. Ohne diesen Zustand erfährt niemand, ob das Feld angekreuzt ist.
Zum Mitnehmen
Die Checkbox, korrigiert
Name, Rolle und Zustand – vorzugsweise direkt durch natives HTML.
Korrektur in 3 Schritten ansehen
Die erfundene Rolle durch eine gültige ersetzen
ARIA kennt nur festgelegte Rollen. „auswahl“ gehört nicht dazu und wird von Browsern schlicht ignoriert.
KorrekturvergleichSchritt 1 · HTML Vorher
<div role="auswahl">Grenzmarke</div>Nachher
<div role="checkbox">Grenzmarke</div>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt das Element jetzt „Kontrollfeld“ statt nur den Text.
Den Attributnamen richtig schreiben
Ein fehlender Buchstabe macht das Attribut unbekannt. Der vorgesehene Name kommt dann nirgendwo an.
KorrekturvergleichSchritt 2 · ARIA Vorher
<div role="checkbox" aria-labl="Grenzmarke"></div>Nachher
<div role="checkbox" aria-label="Grenzmarke"></div>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Grenzmarke“, statt das Feld ohne Namen zu lassen.
Für die Checkbox das native Element verwenden
input type="checkbox" bringt Rolle, Zustand, Fokus und Leertasten-Bedienung mit. Das sichtbare label liefert den Namen.
KorrekturvergleichSchritt 3 · HTML Vorher
<div role="checkbox" aria-label="Grenzmarke"></div>Nachher
<label> <input type="checkbox" name="grenzmarke"> Grenzmarke </label>Markierte Zeilen wurden geändert
So prüfen Sie es Tab erreicht das Feld. Die Leertaste ändert Anzeige und programmatischen Zustand gemeinsam.