ARIA ist ein Satz von Attributen, mit denen sich Rolle, Zustand und Eigenschaften eines Bedienelements für Hilfstechnik beschreiben lassen – etwa role, aria-label, aria-expanded oder aria-hidden. Gedacht ist es für Fälle, die HTML nicht abdeckt. Wo ein passendes Element existiert, ist dieses vorzuziehen: Die erste Regel der ARIA-Spezifikation lautet, ARIA nicht zu verwenden, wenn HTML dasselbe leistet.

ARIA: Rollen und Zustände für Hilfstechnik

Kurz-Fakten

Erste Regel der Spezifikation: kein ARIA, wenn ein natives Element dieselbe Bedeutung mitbringt
ARIA ändert nur, was angesagt wird – nie das Verhalten: Tastaturbedienung muss zusätzlich programmiert werden
aria-label überschreibt den sichtbaren Text für Screenreader; unbedacht gesetzt entsteht ein Widerspruch zwischen Gesehenem und Gehörtem
aria-hidden="true" entfernt einen Bereich aus dem Zugänglichkeitsbaum, lässt ihn aber sichtbar
Falsches ARIA ist nachweislich schlechter als gar keines

Einordnung für die Praxis

Der typische Fehlgriff ist role="button" an einem <div>. Die Ansage stimmt danach, aber das Element reagiert weiterhin nicht auf Tastatur und ist nicht fokussierbar – der Screenreader kündigt eine Schaltfläche an, die sich nicht betätigen lässt. Ein echtes <button> hätte alles davon mitgebracht.

Sinnvoll ist ARIA dort, wo HTML nichts anbietet: Statusmeldungen, die vorgelesen werden sollen, aufklappbare Bereiche mit ihrem Zustand, Beziehungen zwischen weit auseinanderliegenden Elementen.

Was ist ARIA?

Kurz-Fakten

Einordnung für die Praxis

Verwandte Begriffe

Geprüft von