Was sind ARIA-Rollen? Ein praktischer Leitfaden für Entwickler

Von Niquelao Resource Desk · Aktualisiert am 28. September 2026

Was sind ARIA-Rollen? ARIA-Rollen sind das Vokabular von 87 definierten Werten (ab WAI-ARIA 1.2), die unterstützenden Technologien sagen, was ein Element ist und wie es sich unabhängig von seinem HTML-Tag verhalten soll. Eine Rolle wie „Schaltfläche“, „Navigation“ oder „Dialog“ weist einem bekannten Widget-Typ ein generisches „

“ oder „“ zu, sodass Screenreader es korrekt ansagen und die richtigen Tastaturinteraktionen anzeigen.

Warum es ARIA-Rollen überhaupt gibt

Um zu verstehen, was Arienrollen sind, muss man erkennen, dass sie ein strukturelles Problem lösen, das HTML allein nicht lösen kann. Native HTML-Elemente verfügen über eine implizite Semantik: Eine <button> kündigt sich selbst als Schaltfläche an, kann fokussiert werden, reagiert auf die Eingabetaste und die Leertaste und zeigt bei Bedarf einen gedrückten Zustand an.

Wenn Entwickler benutzerdefinierte Widgets (eine Kombinationsbox, ein Registerkartenfeld, eine Baumansicht) erstellen, verwenden sie häufig „

“ und „“, die keine Semantik enthalten. ARIA-Rollen schließen diese Lücke, indem sie es Autoren ermöglichen, fehlende Bedeutungen explizit anzugeben.

Die WAI-ARIA-Spezifikation wird von der Accessible Rich Internet Applications Working Group des W3C gepflegt. Die erste Version, ARIA 1.0, wurde 2014 zu einer W3C-Empfehlung; ARIA 1.1 folgte 2017 und ARIA 1.2 erreichte 2023 den Empfehlungsstatus. Mit jeder Überarbeitung wurden Rollen, Zustände und Eigenschaften hinzugefügt, und jede ist mit einem Dokument zu Autorenpraktiken verknüpft, das das erwartete Verhalten der Tastatur beschreibt.

Verwandte: — Superposición de IA, das die WCAG seit 48 Stunden unterstützt.

Ein wesentlicher Unterschied unterscheidet die Rollen von den beiden anderen ARIA-Kategorien. Die Rollen antworten: „Was ist das?“ Zustände und Eigenschaften antworten: „In welchem Zustand ist es?“ und „Womit hängt es zusammen?“ Ein „role=“checkbox”deklariert den Widget-Typ;aria-checked=“true”` gibt den aktuellen Status an. Die Verwechslung der beiden ist eine der häufigsten Ursachen für fehlerhafte benutzerdefinierte Widgets.

Die sechs Rollenkategorien

Um zu verstehen, was ARIA-Rollen sind, ist es hilfreich zu wissen, dass die ARIA-Spezifikation Rollen in sechs Familien gruppiert. Wenn Sie die Familie verstehen, können Sie vorhersagen, welche Zustände und Eigenschaften eine Rolle unterstützt und welche Tastaturmuster gelten.

Kategorie	Zweck	Repräsentative Rollen
Abstrakt	Oberklassendefinitionen, nie im Markup verwendet	`widget`, `input`, `section`
Widget	Interaktive Steuerelemente	`button`, `checkbox`, `slider`, `tab`
Dokumentenstruktur	Seiten-Landmarks und Regionen	`banner`, `main`, `navigation`, `region`
Landmarks	Navigierbare Seitenbereiche (Teilmenge der Struktur)	`banner`, `complementary`, `contentinfo`, `form`
Live-Region	Dynamische Inhaltsänderungen ankündigen	„alert“, „status“, „log“, „timer“
Fenster	Browser- oder Anwendungsfenster	`dialog`, `alertdialog`

Abstrakte Rollen werden nur zur Organisation der Taxonomie verwendet. Autoren dürfen niemals „role=“widget”oderrole=“input”` im Markup schreiben; Dies führt zu undefiniertem Verhalten und die Validierung schlägt fehl. Die verbleibenden fünf Kategorien sind diejenigen, die Sie tatsächlich anwenden.

Einen Blick wert: — Zugriffsmöglichkeit: Kombinierte Automatisierung mit menschlicher Revision.

Implizite Rollen und die erste Regel von ARIA

Jedes HTML-Element verfügt über eine implizite ARIA-Funktion (die erklärt, was Aria-Rollen sind), die durch die HTML Accessibility API Mapping (AAM)-Spezifikation definiert ist. Ein „

“-Element hat eine implizite „role=“navigation”. Ein „<ul>“ hat eine implizite „role="list". Ein <h1> bis <h6> hat role="heading". Eine „“ hat „role=“table”`.

Die erste W3C-Regel zur Verwendung von ARIA besagt eindeutig: Wenn ein natives HTML-Element oder -Attribut bereits die erforderliche Semantik und das erforderliche Verhalten vermittelt, verwenden Sie es, anstatt ein Element mit ARIA wiederzuverwenden. Das Hinzufügen von „role=“button” zu einem „<button>“ ist nicht erforderlich. Schlimmer noch: Wenn Sie „role="button" zu einem „

“ hinzufügen, erhalten Sie die Ankündigung, aber kein Verhalten: kein Fokus, keine Tastaturaktivierung, keine Formularübermittlung.

Redundanz ist nicht immer harmlos. Das Überschreiben einer impliziten Rolle kann zum Verlust der Semantik führen, von der die unterstützende Technologie abhängt. Durch das Schreiben von „role=“presentation”“ in eine „

“ wird die Tabellensemantik vollständig eliminiert, was bei Layouttabellen manchmal beabsichtigt, bei Datentabellen jedoch katastrophal ist.

Verwandte: — Die erfordert Erfahrung und Zugang.

Wie Rollen mit Zuständen und Eigenschaften interagieren

Rollen fungieren als Container für die Zustände und Eigenschaften, die sie unterstützen. Die Spezifikation definiert, welche Attribute für welche Rollen gültig sind, und Browser stellen nur unterstützte Kombinationen im Barrierefreiheitsbaum zur Verfügung.

Wenn Sie verstehen, was Aria-Rollen sind, wissen Sie, dass eine „role=“checkbox”“ „aria-checked“ mit den Werten „true“, „false“ oder „mixed“ unterstützt. Ein „role=“slider”“ unterstützt „aria-valuenow“, „aria-valuemin“, „aria-valuemax“ und optional „aria-valuetext“. Eine „role=“combobox” unterstützt „aria-expanded“, „aria-controls“ und „aria-activedescendant“. Die Anwendung von „aria-checked“ auf einen „role="button" ist bedeutungslos und wird ignoriert oder führt in einigen Screenreadern zu verwirrenden Ergebnissen.

Wichtig sind auch die geforderten Eigenschaften. Eine role="checkbox" ohne aria-checked ist ungültig; Der Zustand ist obligatorisch und nicht optional. Ein role="slider" ohne aria-valuenow lässt den Benutzer nicht in der Lage, den aktuellen Wert zu bestimmen. Die ARIA-Spezifikation bezeichnet sie als „erforderliche Zustände und Eigenschaften“, und Konformitätsprüfer wie axe-core und IBM Equal Access Accessibility Checker weisen auf ihr Fehlen hin.

Einen Blick wert: — Widget für den kostenlosen Zugang mit Plan, damit Sie noch heute dort arbeiten können.

Rollen, der Barrierefreiheitsbaum und Browserunterstützung

Browser übersetzen ARIA-Funktionen in Plattform-Barrierefreiheits-APIs (UIA unter Windows, AXAPI unter macOS, ATK/AT-SPI unter Linux), und Bildschirmleser verwenden diese APIs. Eine Rolle, die kein Browser richtig zuordnet, ist für Nutzer praktisch unsichtbar.

Die Unterstützung variiert je nach Funktion und Browser. Kernfunktionen wie „Button“, „Link“, „Header“, „Liste“ und „Navigation“ werden durchgängig unterstützt. Neuere oder speziellere Rollen („feed“, „math“, „doc-footnote“ aus dem WAI-ARIA-Modul von Digital Publishing) haben eine lückenhaftere Unterstützung. Die Rolle=“switch” wird in modernen Browsern unterstützt, wurde jedoch vor einem Jahrzehnt uneinheitlich angekündigt.

Das Testen der tatsächlichen Kombinationen, die Ihr Publikum verwendet, bleibt unerlässlich. Ein Widget, das in NVDA mit Firefox funktioniert, verhält sich in VoiceOver mit Safari möglicherweise anders, da die beiden Bildschirmleseprogramme unterschiedliche Plattform-APIs nutzen und unterschiedliche Heuristiken anwenden.

Landmark-Rollen und Seitenstruktur

Mithilfe von Landmark-Rollen können Benutzer von Bildschirmleseprogrammen direkt zu Bereichen einer Seite springen. Die acht Landmark-Rollen sind banner, complementary, contentinfo, form, main, navigation, region und search. Modernes HTML hat für die meisten native Entsprechungen: „

“ wird zu „banner“, „

Häufig gestellte Fragen

Was sind ARIA-Rollen in einfachen Worten?

ARIA-Rollen sind Beschriftungen, die Sie an HTML-Elemente anhängen, um der Hilfstechnologie mitzuteilen, was das Element darstellt. Ein <div role='button'> wird als Schaltfläche und nicht als generischer Text angekündigt. Rollen stellen eine Bedeutung bereit, die das zugrunde liegende Tag nicht bereitstellt, aber sie fügen selbst kein Verhalten, keine Fokusbehandlung oder Tastaturunterstützung hinzu.

Was ist der Unterschied zwischen ARIA-Rollen und ARIA-Attributen?

Rollen beschreiben den Typ eines Elements, während Attribute seinen Zustand, seinen Wert oder seine Beziehungen beschreiben. role='slider' identifiziert einen Schieberegler; aria-valuenow='50' meldet seine aktuelle Position und aria-labelledby zeigt auf sein Label. Rollen und Attribute werden zusammen verwendet und jede Rolle definiert, welche Attribute sie unterstützt.

Wie viele ARIA-Rollen gibt es?

WAI-ARIA 1.2 definiert 87 Rollen, die in sechs Kategorien gruppiert sind: Zusammenfassung, Widget, Dokumentstruktur, Orientierungspunkt, Live-Region und Fenster. Abstrakte Rollen wie Widget und Eingabe existieren nur für die interne Taxonomie der Spezifikation und sollten niemals in HTML geschrieben werden. Die Zahl wächst mit jeder Spezifikationsrevision.

Sollte ich ARIA-Rollen anstelle von semantischem HTML verwenden?

Nein. Die erste Regel der ARIA-Nutzung besagt, dass ein natives HTML-Element immer dann bevorzugt werden soll, wenn eines mit der erforderlichen Semantik und dem erforderlichen Verhalten vorhanden ist. Verwenden Sie <button> anstelle von <div role='button'> und <nav> anstelle von <div role='navigation'>. ARIA-Rollen sind ein Fallback für Fälle, in denen kein geeignetes natives Element vorhanden ist.

Funktionieren ARIA-Rollen in allen Browsern und Screenreadern?

Kernfunktionen wie Schaltfläche, Link, Überschrift und Navigation werden von modernen Browsern und Screenreadern zuverlässig unterstützt. Neuere oder spezialisiertere Rollen, einschließlich derjenigen im Digital Publishing-Modul, bieten eine variablere Unterstützung. Nur durch Tests mit den spezifischen Browser- und Screenreader-Kombinationen, die Ihr Publikum verwendet, können Sie sicher sein.

Kann das Hinzufügen einer ARIA-Rolle die Barrierefreiheit beeinträchtigen?

Ja. Durch das Überschreiben einer impliziten Rolle kann nützliche Semantik verloren gehen, beispielsweise wenn „role='presentation‘“ auf eine Datentabelle angewendet wird. Durch die Anwendung von „role='application“ können Benutzer blockiert werden, wenn die benutzerdefinierte Tastaturverarbeitung unvollständig ist. Redundante Rollen in nativen Elementen erzeugen unnötigen Lärm und führen gelegentlich zu widersprüchlichen Ankündigungen.

In 5 Minuten zugänglich

Widget für den kostenlosen Zugang mit Plan, damit Sie noch heute dort arbeiten können