Kostenloser ScanGratis-Scan

Glossar · Technik & Code

ARIA (WAI-ARIA)

Von Veröffentlicht

Definition: WAI-ARIA (Accessible Rich Internet Applications) ist eine Spezifikation des W3C mit Rollen, Zuständen und Eigenschaften, die als Attribute ins HTML geschrieben werden. Sie teilt assistiven Technologien mit, was ein Element ist und in welchem Zustand es sich befindet – dort, wo HTML allein das nicht ausdrücken kann. ARIA ändert nur die Bedeutung, nie das Verhalten [1].

Englisch: ARIA (WAI-ARIA) · Auch: ARIA-Attribute, ARIA-Rollen · Zuletzt geprüft: 27. September 2026

Was ARIA macht

ARIA liefert drei Arten von Information, die der Browser in den Accessibility Tree schreibt:

  • Rollen sagen, was ein Element ist: role="tab", role="dialog", role="switch".
  • Zustände sagen, wie es gerade ist: aria-expanded="true", aria-checked, aria-selected.
  • Eigenschaften liefern Beziehungen und Namen: aria-label, aria-labelledby, aria-describedby, aria-controls.

Ein Screenreader liest daraus zum Beispiel „Filter, Schaltfläche, reduziert“. Ohne ARIA hätte ein aufklappbares Menü aus <div>-Elementen keine Rolle und keinen Zustand.

Die erste Regel: kein ARIA, wo HTML reicht

Die W3C-Hinweise zum Einsatz von ARIA beginnen mit einer klaren Regel: Wenn es ein natives HTML-Element mit der gewünschten Bedeutung und dem passenden Verhalten gibt, nehmen Sie dieses Element [2]. Ein <button> ist fokussierbar, reagiert auf Enter und Leertaste und wird als Schaltfläche angesagt – ganz ohne ARIA. Der ARIA Authoring Practices Guide warnt ausdrücklich, dass falsches ARIA mehr schadet als fehlendes [3].

ARIA ist ein Versprechen an die Nutzenden. role="button" kündigt eine Schaltfläche an. Tastaturfokus, Enter, Leertaste und den aktuellen Zustand muss Ihr Code dann selbst liefern.

Im Code

<!-- Verspricht einen Button, hält es nicht -->
<div role="button" onclick="toggle()">
  Filter
</div>
<!-- Besser: natives Element, Zustand per JS -->
<button type="button" aria-expanded="false"
        aria-controls="filter">
  Filter
</button>
<div id="filter" hidden>…</div>

Das Skript, das den Filter öffnet, setzt aria-expanded auf "true" und entfernt hidden. Nur so hört ein Screenreader, dass sich etwas geändert hat.

Häufige Fehler

  • Rolle ohne Verhalten: role="button" auf einem <div> ohne tabindex und ohne Tastenbehandlung.
  • aria-hidden="true" auf fokussierbaren Elementen. Der Fokus landet auf etwas, das für den Screenreader nicht existiert.
  • Zustände, die nicht mitgehen: aria-expanded bleibt "false", obwohl das Menü offen ist.
  • App-Rollen für Website-Navigation: role="menu" verspricht Pfeiltasten-Bedienung wie in einer Desktop-Anwendung. Eine Hauptnavigation ist ein <nav> mit einer Liste von Links.
  • Erfundene Rollen und Tippfehler wie role="botton" oder aria-labeledby mit einem „l“. Der Browser ignoriert sie stillschweigend.

Wie Reviseberg damit umgeht

Reviseberg prüft jede Seite mit allen axe-core-Regeln. Für ARIA sind das unter anderem aria-roles, aria-allowed-attr, aria-required-attr, aria-valid-attr-value, aria-required-children und aria-hidden-focus. Sie finden ungültige, unvollständige und widersprüchliche Angaben. Der Tastatur-Agent meldet keyboard:unreachable, wenn ein Element eine Bedien-Rolle wie button oder tab trägt, aber mit Tab nicht erreichbar ist – genau der Fall aus dem Beispiel oben. Ob eine Rolle zum Verhalten des Widgets passt, bleibt eine Frage des Urteils. Deshalb gilt WCAG 4.1.2 bei uns als teilweise automatisch prüfbar [4].

Verwandte Begriffe

Semantisches HTML · Zugänglicher Name · Accessibility Tree · Landmark · Live-Region

Weiterführend

Häufige Fragen

Macht ARIA eine Website barrierefrei?

Nein. ARIA beschreibt nur, was ein Element ist. Bedienbarkeit, Fokus und Tastatursteuerung muss der Code selbst liefern.

Wann brauche ich ARIA überhaupt?

Bei eigenen Bedienelementen, für die es kein natives HTML gibt – etwa Tabs, Baumansichten oder Kombinationsfelder – und für Zustände wie „aufgeklappt“. Der ARIA Authoring Practices Guide beschreibt die üblichen Muster mit Tastaturbedienung.

Was ist der Unterschied zwischen aria-label und aria-labelledby?

aria-label setzt den Namen als Text im Attribut. aria-labelledby verweist auf ein anderes Element, dessen sichtbarer Text der Name wird. Sichtbarer Text ist meist die bessere Wahl.

Quellen

  1. W3C, Accessible Rich Internet Applications (WAI-ARIA) 1.2 – https://www.w3.org/TR/wai-aria-1.2/
  2. W3C, Using ARIA – https://www.w3.org/TR/using-aria/
  3. W3C WAI, ARIA Authoring Practices Guide, Read Me First – https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/
  4. W3C, WCAG 2.2, Erfolgskriterium 4.1.2 Name, Role, Value – https://www.w3.org/TR/WCAG22/#name-role-value

Sehen Sie, was ein Scan auf Ihrer Website findet

Eine Seite in rund 30 Sekunden, ohne E-Mail. Der vollständige Bericht umfasst bis zu 100 Seiten und einen Tastatur-Durchlauf.

Kostenlos prüfen Preise ansehen