ARIA
Auch: WAI-ARIA, Accessible Rich Internet Applications
Accessible Rich Internet Applications — eine W3C-Spezifikation, die Rollen, Zustände und Eigenschaften definiert, um benutzerdefinierte UI-Steuerelemente für assistive Technologien zugänglich zu machen.
WAI-ARIA — Accessible Rich Internet Applications — ist eine W3C-Spezifikation, die eine spezifische Lücke schließt: Wenn native HTML-Elemente nicht ausreichen, um ein benutzerdefiniertes UI-Steuerelement zu beschreiben, stellt ARIA ein Vokabular aus Rollen, Zuständen und Eigenschaften bereit, das assistive Technologien — insbesondere Screenreader — verstehen können.
Was ARIA ist und was nicht
ARIA ist eine Schicht über HTML. Sie fügt kein Verhalten hinzu. Das Setzen von role="button" auf einem <div> lässt einen Screenreader es als Schaltfläche ankündigen, macht das <div> aber nicht fokussierbar, fügt keine Tastaturbehandlung hinzu und erzeugt keine visuelle Gestaltung. Das alles muss selbst ergänzt werden.
Dies ist die Ursache der meisten ARIA-Fehler in der Praxis: Entwickler fügen die Rolle hinzu und hören damit auf — dann wird eine „Schaltfläche“ ausgeliefert, die weder auf Enter noch auf die Leertaste reagiert, per Tab nicht erreichbar ist und keinen Fokusindikator besitzt.
Die erste ARIA-Regel
Wenn ein natives HTML-Element mit der benötigten Semantik und dem benötigten Verhalten verwendet werden kann, sollte dieses verwendet werden.
Jede Zeile ARIA, die geschrieben wird, ist eine Zeile HTML-Semantik, die manuell neu implementiert wird. <button> wird bereits als Schaltfläche angekündigt, ist fokussierbar, reagiert auf Enter und die Leertaste und besitzt einen Fokusrahmen — ohne Zusatzaufwand. <div role="button" tabindex="0"> mit eigenen Tastatur-Handlern führt zum gleichen Ergebnis, aber fragiler und mit mehr Code.
Die drei Hauptkategorien
ARIA definiert drei Arten von Attributen:
- Rollen — was das Element ist (
role="button",role="dialog",role="navigation",role="alert"). Die vollständige Rollenliste umfasst über 80 Einträge; der ARIA Authoring Practices Guide der WAI gruppiert sie in Landmark-Rollen, Widget-Rollen und Dokumentstruktur-Rollen. - Zustände — was der aktuelle Zustand des Elements ist (
aria-expanded="true",aria-checked="false",aria-disabled="true"). Zustände ändern sich zur Laufzeit. - Eigenschaften — was die Beziehungen des Elements sind (
aria-labelledby="title-id",aria-describedby="help-id",aria-controls="menu-id"). Eigenschaften sind typischerweise statisch.
Die drei weiteren ARIA-Regeln
Die fünfteilige W3C-Regelfolge nach „natives HTML verwenden, wenn möglich“:
- Native Semantik nicht ändern, es sei denn, es ist wirklich notwendig. (
<h1 role="button">verwirrt Screenreader darüber, ob es sich um eine Überschrift oder eine Schaltfläche handelt.) - Alle interaktiven ARIA-Steuerelemente müssen per Tastatur bedienbar sein.
role="presentation"oderaria-hidden="true"nicht auf einem fokussierbaren Element verwenden.- Alle interaktiven Elemente müssen einen zugänglichen Namen haben.
Das Einhalten dieser fünf Regeln beseitigt über 80 % der ARIA-Fehler.
Wo nachschlagen
Die nützlichste operative Referenz ist der ARIA Authoring Practices Guide (APG), der vollständige Implementierungsmuster für gängige Widgets liefert — Comboboxen, Dialoge, Baumansichten, Tabs — einschließlich Tabellen zur Tastaturinteraktion und DOM-Beispielen.