ARIA-Rollen, -Zustände und -Eigenschaften

Eine Live-Region, die eine dringende, zeitkritische Meldung übermittelt. Screenreader kündigen sie sofort an und unterbrechen dabei die laufende Sprachausgabe. Sparsam einsetzen — nur für echte Fehler und Warnungen; Missbrauch führt zu Ermüdungserscheinungen bei assistiven Technologien.

Ein Dialog, der eine dringende Meldung übermittelt und eine Benutzerreaktion erfordert. Verbindet Dialog-Semantik mit Alert-Ankündigung. Nur für destruktive Bestätigungen, blockierende Fehler oder andere Unterbrechungen verwenden, die keinen Aufschub dulden.

Kennzeichnet eine in sich geschlossene Komposition, die für sich allein stehen kann — ein Blogbeitrag, eine Nachrichtenmeldung, ein Forenbeitrag oder eine Produktkarte. Das native <article>-Element sollte bevorzugt werden; role="article" kommt nur zum Einsatz, wenn das HTML-Element nicht verwendet werden kann.

Natives HTML: <article>

Das seitenweite Header-Landmark — enthält üblicherweise Logo, primäre Navigation und Suche. Das übergeordnete <header>-Element übernimmt diese Rolle automatisch. Pro Seite ist nur ein banner zulässig.

Natives HTML: <header> (top-level)

Kennzeichnet ein Element als Schaltfläche — ein Steuerelement, das bei Aktivierung eine Aktion auslöst. Bevorzugt sollte das native HTML-Element <button> verwendet werden; role="button" auf einem <div> oder <span> kommt nur in Betracht, wenn das native Element nicht einsetzbar ist.

Natives HTML: <button>

Kennzeichnet ein Element als Kontrollkästchen mit zwei oder drei Zuständen. Bevorzugt wird <input type="checkbox">; role="checkbox" kommt nur zum Einsatz, wenn das native Element nicht verwendet werden kann – etwa bei einem Tri-State-Steuerelement, das einen gemischten Wert anzeigen muss.

Natives HTML: <input type="checkbox">

Kennzeichnet ein Texteingabefeld kombiniert mit einer Popup-Liste – für Autovervollständigung, Typeahead-Suche und benutzerdefinierte Auswahlfelder. Das native <select> genügt für einfache Einzelauswahl; role="combobox" kommt nur zum Einsatz, wenn Filterung oder Remote-Vorschläge benötigt werden.

Natives HTML: <select>

Ein Landmark für Inhalte, die den Hauptinhalt ergänzen, aber auch für sich allein verständlich sind – Seitenleisten, Kästen mit verwandten Artikeln, ergänzende Hervorhebungen. Das <aside>-Element trägt diese Rolle, wenn es auf oberster Ebene steht.

Natives HTML: <aside>

Das seitenweite Footer-Landmark – Urheberrecht, Kontakt, rechtliche Links. Das oberste <footer>-Element trägt diese Rolle automatisch. Pro Seite ist nur ein contentinfo zulässig.

Natives HTML: <footer> (top-level)

Markiert ein Element als Definition eines Begriffs. Mit role="term" (oder nativem <dfn>) kombinieren, um den Begriff mit seiner Definition zu verknüpfen. Bevorzugt werden native <dl>/<dt>/<dd>- oder <dfn>-Elemente — sie tragen die Semantik von Haus aus.

Natives HTML: <dfn>

Kennzeichnet einen Container als modalen oder nicht-modalen Dialog. Das native <dialog>-Element mit showModal() übernimmt Fokusfalle, Top-Layer, Hintergrundblende und Escape-Schließen automatisch. role="dialog" sollte nur verwendet werden, wenn das native Element nicht möglich ist.

Natives HTML: <dialog>

Markiert einen eigenständigen illustrativen Block — Bild, Diagramm, Code-Listing — der typischerweise mit einer Bildunterschrift kombiniert wird. Das native <figure>-Element hat Vorrang; role="figure" kommt nur zum Einsatz, wenn das Wirtselement kein <figure> sein kann.

Natives HTML: <figure>

Ein Landmark für ein Formular — eine Sammlung von Eingabeelementen, die Daten übermitteln. Ein <form>-Element wird NUR dann als Form-Landmark exponiert, wenn es einen zugänglichen Namen besitzt. Ohne Namen ist es lediglich ein Formular, kein Landmark.

Natives HTML: <form aria-label>

Markiert eine generische Gruppierung verwandter Elemente. Semantisch weniger gewichtig als ein Landmark — Screenreader führen Gruppen nicht im Landmark-Menü auf. Für gruppierte Formularelemente ist <fieldset> + <legend> zu verwenden; role="group" kommt für Nicht-Formular-Gruppierungen zum Einsatz.

Natives HTML: <fieldset>

Kennzeichnet ein Element als Überschrift. Vorrangig <h1>–<h6> verwenden — diese liefern die korrekte Semantik und die richtige Ebene ohne zusätzlichen Aufwand. role="heading" sollte nur eingesetzt werden, wenn ein Element nicht als <h*> ausgezeichnet werden kann.

Natives HTML: <h1> – <h6>

Kennzeichnet ein Element als Hyperlink — ein Steuerelement, das beim Aktivieren zu einer neuen Ressource navigiert. Das native HTML-Element <a href> sollte die erste Wahl sein; role="link" auf einem <span> oder <div> kommt nur in Betracht, wenn das native Element nicht verwendbar ist.

Natives HTML: <a href>

Kennzeichnet ein Element als Liste von Einträgen. Zuerst sollte <ul>, <ol> oder <dl> verwendet werden — native Elemente liefern Rolle, Anzahl und visuelles Aufzählungszeichen automatisch. role="list" kommt nur dann in Betracht, wenn CSS list-style: none Safaris Heuristik zur Entfernung der Listenrolle auslöst.

Natives HTML: <ul> / <ol>

Kennzeichnet ein Element als Liste auswählbarer Optionen. Für einfache Einzelauswahl sollte <select> verwendet werden — mobilfreundlich, vollständige Tastaturunterstützung. role="listbox" ist sinnvoll bei benutzerdefiniertem Styling, Mehrfachauswahl oder Combobox-Kopplung.

Natives HTML: <select> (Einzelauswahl)

Kennzeichnet ein Element als einzelnes Element in einer Liste. Innerhalb von <ul> oder <ol> sollte <li> verwendet werden — das native Element trägt die Rolle und die Position-in-Set. role="listitem" kommt nur zum Einsatz, wenn es mit einem expliziten role="list" auf einem Nicht-Listen-Elternelement kombiniert wird.

Natives HTML: <li>

Das Landmark für den Hauptinhalt — der primäre Seiteninhalt, ausgenommen wiederkehrende Header, Navigation und Footer. Das Element <main> trägt diese Rolle automatisch. Genau ein main pro Seite.

Natives HTML: <main>

Kennzeichnet einen Container als Anwendungsmenü — das Popup von Datei/Bearbeiten-Menüs oder Kontextmenüs. Es gibt kein HTML-Äquivalent. Eine Navigationsliste einer Website ist KEIN Menü; stattdessen sollte <nav> mit <ul> aus Links verwendet werden.

Kennzeichnet einen Container als persistente Menüleiste — den immer sichtbaren horizontalen Streifen mit Datei/Bearbeiten/Ansicht-Menüs aus Desktop-Anwendungen. Zu unterscheiden von menu, das ein Popup ist. Auf Websites fast nie das richtige Muster.

Markiert ein Element als ausführbaren Eintrag innerhalb eines Menüs oder einer Menüleiste. Es gibt kein HTML-Äquivalent — Menüs sind ein reines ARIA-Konstrukt. Diese Rolle sollte nur für ein echtes Menü im Anwendungsstil verwendet werden; eine einfache Navigationsliste sollte NICHT menu/menuitem verwenden.

Ein Landmark, das eine Gruppe von Navigationslinks zusammenfasst — Hauptnavigation, Breadcrumb, Inhaltsverzeichnis. Das <nav>-Element trägt diese Rolle automatisch. Mehrere navs pro Seite sind üblich und zulässig, aber jede muss einen eindeutigen zugänglichen Namen haben.

Natives HTML: <nav>

Kennzeichnet ein Element als auswählbaren Eintrag innerhalb einer Listbox. Eine Option MUSS ein Nachfahre einer Listbox sein (direkt oder über aria-owns). role="option" kommt nur zum Einsatz, wenn eine benutzerdefinierte Listbox oder ein Combobox-Popup erstellt wird.

Natives HTML: <option>

Kennzeichnet ein Element als Fortschrittsanzeige. Bevorzugt wird <progress> — es liefert die Semantik, die bestimmte visuelle Darstellung und die Wertattribute nativ. role="progressbar" kommt zum Einsatz, wenn das native Element stilistisch nicht ausreicht.

Natives HTML: <progress>

Kennzeichnet ein Element als einzelne Option in einer Gruppe mit gegenseitigem Ausschluss. Ein Radio-Element muss sich innerhalb einer radiogroup (oder eines nativen fieldset) befinden. Bevorzugt wird <input type="radio">; role="radio" kommt nur zum Einsatz, wenn das native Input nicht möglich ist.

Natives HTML: <input type="radio">

Ein generisches Landmark für Inhalte, die nicht zu banner, main, navigation, complementary oder contentinfo passen — aber dennoch wichtig genug sind, um direkt angesteuert zu werden. Ein <section>-Element wird nur dann zu einem Region-Landmark, wenn es einen zugänglichen Namen besitzt.

Natives HTML: <section aria-label>

Ein Landmark, das ein Suchformular gruppiert. Damit können Screenreader-Nutzer direkt zur Seitensuche springen. Das native <search>-Element (HTML 2024) trägt diese Rolle automatisch; für breitere Browser-Unterstützung wird role="search" auf einem <form> empfohlen.

Natives HTML: <search>

Kennzeichnet ein Element als Texteingabe für eine Suchaufgabe. Bevorzugt wird <input type="search"> – es bietet in den meisten Browsern einen Löschen-Button und die Such-Semantik von Haus aus. role="searchbox" kommt nur auf einem benutzerdefinierten contenteditable-Suchfeld zum Einsatz.

Natives HTML: <input type="search">

Markiert ein Element als Trennlinie zwischen Inhaltsbereichen oder Einträgen in einem zusammengesetzten Widget. Für thematische Absätze in Fließtext sollte zuerst <hr> verwendet werden; role="separator" kommt zum Einsatz, wenn Einträge innerhalb eines Menüs oder einer Symbolleiste getrennt werden.

Natives HTML: <hr>

Markiert ein Element als Eingabefeld zur Auswahl eines Werts aus einem Bereich. Zuerst sollte <input type="range"> verwendet werden; role="slider" kommt nur zum Einsatz, wenn ein benutzerdefinierter Track benötigt wird — etwa ein Zweipunkt-Bereichswähler, den native HTML nicht unterstützt.

Natives HTML: <input type="range">

Eine Live-Region, die nicht dringende Hinweisinformationen übermittelt. Screenreader kündigen Änderungen höflich an — bei der nächsten Sprechpause, ohne die laufende Ausgabe zu unterbrechen. Geeignet für Routinebestätigungen, Anzahlen und Fortschrittsmeldungen. Das native <output>-Element trägt diese Rolle.

Natives HTML: <output>

Kennzeichnet ein Element als Ein/Aus-Schalter. Funktional einer Checkbox ähnlich, wird jedoch als "switch, on" oder "switch, off" angekündigt statt als "checked" — besser geeignet für Einstellungsschalter. Ein natives HTML-Äquivalent existiert bislang nicht.

Markiert ein Element als einzelnen Reiter in einer Registerkartenoberfläche. Ein Tab MUSS sich innerhalb einer tablist befinden und SOLLTE über aria-controls auf das zugehörige tabpanel verweisen. Es gibt kein natives HTML-Tab-Element — Tabs sind ein reines ARIA-Muster.

Markiert einen Behälter als den Tab-Streifen einer Registerkartenoberfläche. Enthält Kindelemente mit role="tab". Tabs und tabpanels sind ein reines ARIA-Muster — es gibt kein natives HTML-tablist-Element.

Markiert den Inhaltsbereich, der einem Tab zugeordnet ist. Jedes tabpanel wird über aria-labelledby von seinem Tab beschriftet; der Tab verweist über aria-controls auf das Panel. Es wird jeweils ein Panel angezeigt; die übrigen werden mit dem hidden-Attribut ausgeblendet.

Kennzeichnet ein Element als ein- oder mehrzeiliges Texteingabefeld. Vorrang haben <input type="text"> oder <textarea> — sie decken jedes Textbox-Verhalten kostenlos ab. role="textbox" ist nur beim Aufbau eines Rich-Text-Editors auf einem contenteditable-Element angebracht.

Natives HTML: <input type="text"> / <textarea>

Kennzeichnet einen Container als Toolbar — eine gruppierte Menge zusammengehöriger Steuerelemente (eine Formatierungsleiste, eine Reihe von Schaltflächen mit Symbolen). Reduziert die Tab-Stop-Kosten: Eine Toolbar mit 10 Schaltflächen wird zu einem einzigen Tab-Stop; Pfeiltasten navigieren zwischen den Schaltflächen.

Kennzeichnet ein Element als hierarchischen Container mit Treeitems — einen Datei-Explorer, verschachtelte Kategorien oder ein Organigramm. Einzelner Tab-Stop, Pfeiltasten-Navigation, Auf-/Zuklappen. Es gibt kein natives HTML-Äquivalent.

Kennzeichnet ein Element als Knoten innerhalb eines Baums. Ein treeitem kann erweiterbar (übergeordneter Knoten) oder terminal (Blattknoten) sein. Nur verwenden, wenn ein hierarchischer Navigator — Datei-Explorer, Organigramm, verschachtelte Kategorien — mit Einzel-Tab-Stop-Pfeiltastennavigation benötigt wird.

Steuert, ob assistive Technologie bei einer Aktualisierung den gesamten Inhalt einer Live-Region oder nur den geänderten Teil ankündigt. Der Standardwert ist "false" (nur die Änderung). "true" wird gesetzt, wenn der Kontext nur als vollständiger Satz verständlich ist.

Kennzeichnet einen Bereich als mitten in einer Aktualisierung, sodass assistive Technologie Zwischenmeldungen unterdrückt. Beim Laden oder während umfangreicher DOM-Änderungen auf "true" setzen; nach Abschluss auf "false" zurücksetzen.

Gibt den aktuellen Aktivierungszustand eines Kontrollkästchens, Optionsfelds oder menübasierten Kontrollkästchens an. Akzeptiert "true", "false" oder "mixed". Das native HTML-Kontrollkästchen verwaltet diesen Zustand automatisch – es muss nur bei benutzerdefinierten Widgets manuell gesetzt werden.

Markiert das Element, das den aktuellen Eintrag in einer Menge repräsentiert — die aktive Seite in einer Navigation, den aktuellen Schritt in einem Assistenten, den heutigen Tag in einem Kalender. Spezifischer als aria-selected; für Links und Einträge, bei denen Selektion nicht die passende Metapher ist.

Zeigt an, dass ein Steuerelement wahrnehmbar und fokussierbar ist, aber nicht auf Benutzereingaben reagiert. Das native HTML-Attribut disabled sollte bevorzugt werden; aria-disabled empfiehlt sich, wenn das Element fokussierbar bleiben oder ein Tooltip anzeigen soll.

Gibt an, ob ein aufklappbares Element — Disclosure-Button, Combobox, Menü, Treeitem — aktuell geöffnet ist. Akzeptiert "true" oder "false". Wird üblicherweise mit aria-controls kombiniert, das auf den Bereich zeigt, den das Steuerelement öffnet.

Entfernt ein Element und alle seine Nachfahren aus dem Accessibility-Tree. Sehende Nutzende sehen das Element weiterhin; assistive Technologie erreicht es nicht. Nur für dekorative Inhalte verwenden; niemals auf ein fokussierbares Steuerelement anwenden.

Zeigt an, dass ein Formularelement die Validierung nicht bestanden hat. In Kombination mit aria-describedby, das auf die lesbare Fehlermeldung zeigt, gibt der Screenreader sowohl den ungültigen Zustand als auch den Grund dafür bekannt.

Kennzeichnet einen Bereich, dessen Aktualisierungen von assistiver Technologie angekündigt werden sollen, ohne den Fokus zu verschieben. Für die meisten Fälle empfiehlt sich „polite“, für echte Dringlichkeit „assertive“. Der Bereich muss beim initialen Rendern im DOM vorhanden sein.

Teilt assistiver Technologie mit, den Rest der Seite als inaktiv zu behandeln, während ein Dialog geöffnet ist. Auf role="dialog" oder role="alertdialog" auf "true" setzen. Macht den Hintergrund nicht tatsächlich inaktiv — in Kombination mit dem inert-Attribut oder einer Fokusfalle verwenden.

Gibt an, ob ein Umschalter aktuell gedrückt ist. Bei aktivem Schalter auf "true" setzen, bei inaktivem auf "false"; die assistive Technologie liest den Zustand zusammen mit der Beschriftung vor.

Gibt an, dass der Wert eines Formularsteuerelements nicht bearbeitet werden kann, das Steuerelement jedoch weiterhin bedienbar ist — fokussierbar, kopierbar und beim Absenden des Formulars übermittelt. Unterscheidet sich von aria-disabled, das das Steuerelement inoperabel macht.

Gibt an, dass ein Element innerhalb eines Einzel- oder Mehrfachauswahl-Containers aktuell ausgewählt ist. Wird auf tab, option, gridcell, treeitem und ähnlichen Rollen verwendet. Zu unterscheiden von aria-checked (Kontrollkästchen/Radio) und aria-pressed (Umschalter).

Zeigt bei einem zusammengesetzten Widget auf die ID des aktuell aktiven Nachfahrenelements. Der DOM-Fokus verbleibt auf dem Container, während ein virtueller Fokus über die Kinder wandert. Alternative zum Roving-Tabindex für Listboxen, Comboboxen und Grids.

Gibt bei einem Textfeld oder einer Combobox an, welche Art von Autovervollständigung das Steuerelement bietet — eingebettete Vorschläge, eine Optionsliste, beides oder keines. Unterscheidet sich vom HTML-autocomplete-Attribut, das die Formularfeld-Semantik für den Browser betrifft.

Benennt das Element oder die Elemente, deren Vorhandensein oder Inhalt dieses Steuerelement bestimmt. Typische Paare: Ein Tab controls sein tabpanel, eine Disclosure-Schaltfläche controls einen eingeblendeten Bereich. Die Unterstützung durch assistive Technologien ist uneinheitlich – sparsam einsetzen.

Verweist auf eine oder mehrere IDs von Elementen, deren Text zur erweiterten Beschreibung dieses Elements wird. Wird nach dem zugänglichen Namen vorgelesen. Zu verwenden für Hilfetext, Formathinweise und inline angezeigte Fehlermeldungen.

Teilt assistiver Technologie mit, dass das Aktivieren dieses Steuerelements ein Popup öffnet, und gibt dessen Art an. Akzeptiert "menu", "listbox", "tree", "grid", "dialog" sowie "true" / "false". Mit aria-expanded kombinieren, damit AT auch den geöffneten oder geschlossenen Zustand ansagen kann.

Stellt einen barrierefreien Namen als Zeichenkette bereit, wenn kein sichtbarer Text vorhanden ist. Nur verwenden, wenn keine Beschriftung auf dem Bildschirm existiert — ist sichtbarer Text vorhanden, wird aria-labelledby bevorzugt, damit der gesprochene Name mit dem übereinstimmt, was die Nutzenden sehen.

Referenziert eine oder mehrere Element-IDs, deren sichtbarer Text zum barrierefreien Namen dieses Elements wird. Wird aria-label vorgezogen, wenn auf dem Bildschirm bereits Text vorhanden ist, der das Steuerelement beschreibt.

Gibt die hierarchische Ebene eines Elements innerhalb einer Struktur an. Pflichtangabe bei Elementen mit role="heading"; ebenfalls gültig bei role="treeitem" und role="listitem" innerhalb verschachtelter Listen. Ganzzahliger Wert, beginnend bei 1.

Deklariert eine Eltern-Kind-Beziehung im Barrierefreiheitsbaum, wenn die DOM-Struktur diese nicht abbildet. Die referenzierten Elemente werden für assistive Technologien als Kinder dieses Elements betrachtet. Ein mächtiges Werkzeug — leicht falsch einzusetzen.

Position eines Eintrags innerhalb einer Menge, wenn der DOM diese nicht abbilden kann — typischerweise bei virtualisierten, paginierten oder gefilterten Listen. Stets in Kombination mit aria-setsize verwenden, damit Screenreader „3 von 47“ ansagen können.

Gibt an, dass die Benutzereingabe in einem Steuerelement erforderlich ist, bevor ein Formular abgesendet werden kann. Bei nativen Formularfeldern sollte das HTML-Attribut required verwendet werden; aria-required kommt nur zum Einsatz, wenn kein natives HTML-Äquivalent verfügbar ist.

Gesamtanzahl der Einträge in einer Menge, wenn das DOM nicht alle enthält. Wird zusammen mit aria-posinset verwendet, damit ein Screenreader „Eintrag 14 von 5.000“ ankündigen kann, auch wenn nur fünf gerendert werden. Bei unbekannter Gesamtzahl ist -1 zu verwenden.

Wird an einem Spalten- oder Zeilenkopf in einem sortierbaren Raster oder einer Tabelle verwendet und gibt die aktuelle Sortierrichtung an. Mögliche Werte: "ascending", "descending", "other" oder "none". Nur ein Kopf in der Tabelle sollte gleichzeitig einen sortierten Wert tragen.

Aktueller numerischer Wert eines bereichsbasierten Widgets — Schieberegler, Fortschrittsbalken, Drehfeld, Scrollbalken. Zusammen mit aria-valuemin und aria-valuemax angeben, damit assistive Technologie eine aussagekräftige Position ankündigen kann. Für nicht-numerische Beschriftungen aria-valuetext verwenden.