ARIA States sind Zustandsattribute, die dem Screenreader mitteilen, in welchem Zustand sich ein interaktives Element auf einer Website befindet. Sie gehören zur WAI-ARIA-Spezifikation und sind essenziell für barrierefreies Webdesign.
Was genau sind States?
Während sogenannte Roles die Funktion eines Elements beschreiben, geben States (Zustände) Auskunft über dessen momentane Ausprägung – z. B.:
- Ist das Akkordeonfeld geöffnet oder geschlossen?
- Ist eine Checkbox aktiviert oder deaktiviert?
- Wird ein Element gerade ausgeblendet?
Beispiele für gängige States:
| ARIA-State | Beschreibung |
|---|---|
aria-expanded | Zeigt, ob ein Bereich (z. B. Menü) offen ist |
aria-checked | Gibt den Status einer Checkbox an |
aria-disabled | Kennzeichnet ein deaktiviertes Element |
aria-hidden | Versteckt ein Element vor dem Screenreader |
aria-pressed | Für Buttons mit Schaltfunktion |
aria-selected | Markiert das aktive Element in einer Liste |
Warum sind States wichtig?
Ohne States fehlen dem Screenreader wichtige Kontextinformationen. Nutzer würden z. B. nicht erfahren, ob ein Bereich bereits geöffnet oder ein Button gedrückt ist. Das beeinträchtigt die Tastaturbedienbarkeit und die gesamte Nutzererfahrung.
Der Klicklounge-Tipp: States allein reichen nicht – sie müssen dynamisch aktualisiert werden, wenn sich der Zustand ändert. Achten Sie darauf, dass auch visuelle Änderungen für assistive Technologien korrekt abgebildet sind.