ARIA

ARIA ist ein Satz von HTML-Attributen, der Rolle, Eigenschaften und Zustand eines Elements für Hilfstechnologien ergänzt. Es ändert nichts am Aussehen und nichts am Verhalten; es beschreibt nur, was ein Element ist und wie es gerade steht.

ARIA

Satz von HTML-Attributen, der Rolle, Eigenschaften und Zustand eines Elements für Hilfstechnologien ergänzt.
Beispiel: „Das Akkordeon meldet über ARIA, ob sein Abschnitt gerade aufgeklappt ist.“

Auch: WAI-ARIA. Die Abkürzung steht für Accessible Rich Internet Applications; WAI ist die Web Accessibility Initiative des W3C, die den Standard pflegt.

Abgrenzung zu HTML: HTML bringt Rolle, Fokus und Tastaturbedienung für viele Elemente schon mit. ARIA ergänzt nur, was dort fehlt, und ist auf eigene Bauformen angewiesen, die es im Standard nicht gibt.

Die erste Regel lautet: kein ARIA

Das steht so in der Spezifikation. Wo ein HTML-Element dieselbe Aufgabe erfüllt, ist es vorzuziehen, weil es Rolle, Fokus und Tastaturbedienung von Haus aus mitbringt. Ein button braucht kein role="button", eine Liste kein role="list".

Die fünf Regeln samt Begründung stehen in Using ARIA. Die zweite lautet, die Bedeutung nativer Elemente nicht zu überschreiben, die vierte, fokussierbare Elemente nicht per aria-hidden zu verstecken.

<!-- genuegt, traegt Rolle und Tastaturbedienung selbst -->
<button>Men&uuml; &ouml;ffnen</button>

<!-- noetig, weil HTML fuer diese Bauform nichts mitbringt -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="p1" id="t1">Leistungen</button>
  <button role="tab" aria-selected="false" aria-controls="p2" id="t2">Ablauf</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1"> ... </div>

Was ARIA ergänzt

Drei Arten von Angaben. Die Rolle über role, etwa tablist, dialog oder status. Eigenschaften, die sich selten ändern, etwa aria-label oder aria-describedby. Und Zustände, die sich laufend ändern, etwa aria-expanded, aria-selected oder aria-invalid.

Der Zustand ist dabei der Teil, der tatsächlich gepflegt werden muss: Klappt ein Menü auf, muss aria-expanded im selben Moment von false auf true wechseln. Ein Attribut, das stehen bleibt, sagt etwas Falsches aus und ist schlechter als gar keines.

Woran ARIA scheitert

An der falschen Rolle. Ein role="button" auf einem div macht aus ihm keinen Knopf: Fokus und Tastaturbedienung fehlen weiterhin und müssen von Hand nachgebaut werden. Angekündigt wird dann ein Bedienelement, das sich nicht bedienen lässt.

Der zweite Fall ist aria-hidden auf etwas Fokussierbarem. Das Element verschwindet für Hilfstechnologien, bleibt aber mit der Tabulatortaste erreichbar. Wer dort landet, hört nichts.