WAI-ARIA Rollen

ARIA-Rollen bieten semantische Bedeutungen für Inhalte, die es Screenreadern und anderen Tools ermöglichen, die Interaktion mit einem Objekt auf eine Weise zu präsentieren und zu unterstützen, die den Erwartungen der Benutzer an diesen Objekttyp entspricht. ARIA-Rollen können verwendet werden, um Elemente zu beschreiben, die nicht nativ in HTML existieren oder die existieren, aber noch nicht vollständig von Browsern unterstützt werden.

Standardmäßig haben viele semantische Elemente in HTML eine Rolle; zum Beispiel hat <input type="radio"> die Rolle "radio". Nicht-semantische Elemente in HTML haben keine Rolle; <div> und <span> ohne hinzugefügte Semantik geben null zurück. Das role-Attribut kann Semantik bereitstellen.

ARIA-Rollen werden HTML-Elementen mit role="Rollentyp" hinzugefügt, wobei Rollentyp der Name einer Rolle in der ARIA-Spezifikation ist. Einige Rollen erfordern die Einbeziehung verbundener ARIA-Zustände oder -Eigenschaften; andere sind nur in Verbindung mit anderen Rollen gültig.

Zum Beispiel wird <ul role="tabpanel"> von Screenreadern als 'Tab-Panel' angekündigt. Wenn das Tab-Panel jedoch keine verschachtelten Tabs hat, ist das Element mit der Tabpanel-Rolle tatsächlich kein Tab-Panel, und die Zugänglichkeit wird negativ beeinflusst.

Die mit jeder Rolle verbundenen ARIA-Zustände und -Eigenschaften sind auf den Seiten der Rolle enthalten, wobei jedes Attribut auch über eine eigene Seite verfügt.

ARIA-Rollentypen

Es gibt 6 Kategorien von ARIA-Rollen:

1. Dokumentstruktur-Rollen

Dokumentstruktur-Rollen werden verwendet, um eine strukturelle Beschreibung für einen Abschnitt von Inhalten bereitzustellen. Die meisten dieser Rollen sollten nicht mehr verwendet werden, da Browser jetzt semantische HTML-Elemente mit derselben Bedeutung unterstützen. Die Rollen ohne HTML-Äquivalente, wie Präsentations-, Werkzeug- und Tooltipp-Rollen, bieten unterstützenden Technologien wie Screenreadern Informationen über die Dokumentstruktur, da keine äquivalenten nativen HTML-Tags verfügbar sind.

Für die meisten Dokumentstruktur-Rollen sind semantische HTML-Äquivalente verfügbar und unterstützt. Vermeiden Sie die Verwendung von:

application
article (verwenden Sie <article>)
cell (verwenden Sie <td>)
columnheader (verwenden Sie <th scope="col">)
definition (verwenden Sie <dfn>)
directory
document
figure (verwenden Sie stattdessen <figure>)
group
heading (verwenden Sie h1 bis h6)
img (verwenden Sie <img> oder <picture> stattdessen)
list (verwenden Sie entweder <ul> oder <ol> stattdessen)
listitem (verwenden Sie <li> stattdessen)
meter (verwenden Sie <meter> stattdessen)
row (verwenden Sie <tr> mit <table>)
rowgroup (verwenden Sie <thead>, <tfoot> und <tbody>)
rowheader (verwenden Sie <th scope="row">)
separator (verwenden Sie <hr> wenn es nicht fokussierbar ist)
table (verwenden Sie <table>)
term (verwenden Sie <dfn>)

Diese werden der Vollständigkeit halber eingeschlossen, sind aber in den meisten Fällen selten oder gar nicht nützlich:

2. Widget-Rollen

Widget-Rollen werden verwendet, um gängige interaktive Muster zu definieren. Wie Dokumentstruktur-Rollen haben einige Widget-Rollen dieselbe Semantik wie gut unterstützte native HTML-Elemente und sollten daher vermieden werden. Ein wesentlicher Unterschied besteht darin, dass Widget-Rollen in der Regel JavaScript für die Interaktion erfordern, während Dokumentstruktur-Rollen dies nicht tun.

Vermeiden Sie die Verwendung von button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio und textbox, die wir der Vollständigkeit halber eingeschlossen haben. Für die meisten sind semantische Äquivalente mit zugänglicher Interaktivität verfügbar und unterstützt. Weitere Informationen finden Sie in der individuellen Rollendokumentation.

Zusammengesetzte Widget-Rollen

Vermeiden Sie die Verwendung von grid, listbox und radiogroup, die wir der Vollständigkeit halber eingeschlossen haben. Weitere Informationen finden Sie in der individuellen Rollendokumentation.

Beachten Sie, dass es auch eine Widget-Rolle (role="widget") gibt, die eine abstrakte Rolle ist und nicht zur Kategorie der Widget-Rollen gehört.

3. Landmark-Rollen

Landmark-Rollen bieten eine Möglichkeit, die Organisation und Struktur einer Webseite zu identifizieren. Durch Klassifizierung und Kennzeichnung von Seitensektionen wird die strukturelle Information, die visuell durch das Layout vermittelt wird, programmatisch repräsentiert. Screenreader verwenden Landmark-Rollen, um die Tastaturnavigation zu wichtigen Seitensektionen bereitzustellen. Verwenden Sie diese sparsam. Zu viele Landmark-Rollen erzeugen "Rauschen" in Screenreadern, was es schwierig macht, das Gesamtlayout der Seite zu verstehen.

4. Live-Region-Rollen

Live-Region-Rollen werden verwendet, um Elemente zu definieren, deren Inhalte dynamisch geändert werden. Sehende Benutzer können dynamische Änderungen sehen, wenn sie visuell erkennbar sind. Diese Rollen helfen sehbehinderten und blinden Benutzern zu wissen, ob Inhalte aktualisiert wurden. Unterstützende Technologien, wie Screenreader, können dazu veranlasst werden, dynamische Inhaltsänderungen anzukündigen:

5. Fensterrollen

Fensterrollen definieren Unterfenster für das Hauptdokumentfenster, innerhalb desselben Fensters, wie z.B. modale Dialoge:

6. Abstrakte Rollen

Abstrakte Rollen sind nur für die Verwendung durch Browser gedacht, um ein Dokument zu organisieren und zu rationalisieren. Sie sollten nicht von Entwicklern, die HTML-Markup schreiben, verwendet werden. Dadurch wird den unterstützenden Technologien oder den Benutzern keine sinnvolle Information vermittelt.

Vermeiden Sie die Verwendung von command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget und window.

Hinweis: Verwenden Sie keine abstrakten Rollen in Ihren Seiten und Anwendungen. Sie sind für die Verwendung durch Browser gedacht. Sie sind nur zur Referenz enthalten.

Warnung: "Abstrakte Rollen werden für die Ontologie verwendet. Autoren DÜRFEN keine abstrakten Rollen in Inhalten verwenden." - Die WAI-ARIA-Spezifikation

Auf MDN definierte Rollen

Im Folgenden finden Sie die Referenzseiten zu den auf MDN besprochenen WAI-ARIA-Rollen.

ARIA: `search`-Rolle: Die search-Rolle wird verwendet, um die Suchfunktionalität zu identifizieren; den Abschnitt der Seite, der genutzt wird, um die Seite, die Website oder eine Sammlung von Websites zu durchsuchen.
ARIA: `tooltip`-Rolle: Ein tooltip ist eine kontextbezogene Textblase, die eine Beschreibung für ein Element anzeigt, die bei Zeiger-Hover oder Tastaturfokus erscheint.
ARIA: alert Rolle: Die alert Rolle ist für wichtige und in der Regel zeitkritische Informationen gedacht. Das alert ist eine Art von status, das als atomare Live-Region verarbeitet wird.
ARIA: alertdialog-Rolle: Die alertdialog-Rolle sollte bei modalen Alert-Dialogen verwendet werden, die den Arbeitsablauf der Nutzerin oder des Nutzers unterbrechen, um eine wichtige Nachricht zu kommunizieren und eine Antwort zu erfordern.
ARIA: Anwendungsrolle: Die application-Rolle zeigt Hilfstechnologien an, dass ein Element und alle seine Kinder ähnlich wie eine Desktop-Anwendung behandelt werden sollten und keine herkömmlichen HTML-Interpretationstechniken verwendet werden sollten. Diese Rolle sollte nur verwendet werden, um sehr dynamische und desktopähnliche Webanwendungen zu definieren. Die meisten mobilen und Desktop-Web-Apps werden für diesen Zweck nicht als Anwendungen betrachtet.
ARIA: article-Rolle: Die article-Rolle kennzeichnet einen Abschnitt einer Seite, der leicht für sich allein auf einer Seite, in einem Dokument oder auf einer Website bestehen könnte. Sie wird normalerweise auf verwandte Inhaltselemente wie Kommentare, Forenbeiträge, Zeitungsartikel oder andere Elemente gesetzt, die auf einer Seite gruppiert sind.
ARIA: banner-Rolle: Die banner-Rolle dient zur Definition eines globalen Website-Headers, der in der Regel ein Logo, den Firmennamen, eine Suchfunktion und möglicherweise die globale Navigation oder einen Slogan enthält. Sie befindet sich allgemein oben auf der Seite.
ARIA: button Rolle: Die button Rolle ist für klickbare Elemente, die eine Reaktion auslösen, wenn sie vom Benutzer aktiviert werden. Durch das Hinzufügen von role="button" teilt man dem Screenreader mit, dass das Element ein Button ist, bietet jedoch keine Button-Funktionalität. Verwenden Sie stattdessen button oder input mit type="button".
ARIA: cell Rolle: Der cell-Wert des ARIA-role-Attributs kennzeichnet ein Element als eine Zelle in einem tabellarischen Container, der keine Spalten- oder Zeilenkopf-Informationen enthält. Damit es unterstützt wird, muss die Zelle innerhalb eines Elements mit der Rolle row verschachtelt sein.
ARIA: checkbox Rolle: Die checkbox Rolle ist für ankreuzbare interaktive Steuerungen gedacht. Elemente, die role="checkbox" enthalten, müssen auch das aria-checked Attribut beinhalten, um den Status der Checkbox für unterstützende Technologien sichtbar zu machen.
ARIA: columnheader Rolle: Der Wert columnheader des ARIA-Attributs role identifiziert ein Element als eine Zelle in einer Zeile, die Header-Informationen für eine Spalte enthält, ähnlich dem nativen th-Element mit Spaltenumfang.
ARIA: combobox Rolle: Die combobox Rolle identifiziert ein Element als ein input, das ein anderes Element, wie eine listbox oder ein grid, steuert, das dynamisch aufpoppen kann, um dem Benutzer zu helfen, den Wert dieses input festzulegen.
ARIA: command-Rolle: Die command-Rolle definiert ein Widget, das eine Aktion ausführt, aber keine Eingabedaten empfängt.
ARIA: comment Rolle: Die comment-Rolle bezeichnet semantisch einen Kommentar/Reaktion zu einem Inhalt auf der Seite oder zu einem vorherigen Kommentar.
ARIA: complementary-Rolle: Die complementary Landmark-Rolle wird verwendet, um einen unterstützenden Abschnitt zu kennzeichnen, der sich auf den Hauptinhalt bezieht, aber auch alleine bestehen kann, wenn er getrennt wird. Diese Abschnitte werden häufig als Seitenleisten oder Hervorhebungsboxen präsentiert. Wo möglich, verwenden Sie stattdessen das HTML-Element <aside>.
ARIA: composite Rolle: Die composite abstrakte Rolle weist auf ein Widget hin, das navigierbare Nachfahren oder eigene Kinder enthalten kann.
ARIA: contentinfo Rolle: Die contentinfo-Rolle definiert einen Footer, der identifizierende Informationen wie Urheberrechtshinweise, Navigationslinks und Datenschutzbestimmungen enthält und in jedem Dokument einer Website zu finden ist. Dieser Abschnitt wird häufig als Footer bezeichnet.
ARIA: definition Rolle: Die definition ARIA-Rolle gibt an, dass das Element eine Definition eines Begriffs oder Konzepts ist.
ARIA: dialog Rolle: Die dialog Rolle wird verwendet, um einen HTML-basierten Anwendungsdialog oder ein Fenster zu kennzeichnen, das Inhalte oder die Benutzeroberfläche vom Rest der Webanwendung oder Seite trennt. Dialoge werden im Allgemeinen über dem Rest des Seiteninhalts mittels eines Overlays platziert. Dialoge können entweder nicht-modal (es ist immer noch möglich, mit Inhalten außerhalb des Dialogs zu interagieren) oder modal sein (es kann nur mit dem Inhalt im Dialog interagiert werden).
ARIA: directory Rolle: Die directory-Rolle war für eine Liste von Referenzen auf Mitglieder einer Gruppe gedacht, wie ein statisches Inhaltsverzeichnis.
ARIA: document Rolle: Die document Rolle ist für fokussierbare Inhalte innerhalb komplexer zusammengesetzter Widgets oder Anwendungen vorgesehen, bei denen Hilfstechnologien den Lesekontext zurück in einen Lesemodus schalten können.
ARIA: Dokumentstrukturrollen: ARIA-Dokumentstrukturrollen werden verwendet, um eine strukturelle Beschreibung für einen Inhaltsabschnitt bereitzustellen.
ARIA: feed Rolle: Ein feed ist eine dynamische scrollbare list von articles, bei der Artikel an beiden Enden der Liste hinzugefügt oder entfernt werden können, während der Benutzer scrollt. Ein feed ermöglicht es Screenreadern, den Lese-Cursor im Browsemode zu verwenden, um durch einen Stream von reichhaltigem Inhalt zu lesen und zu scrollen, der möglicherweise unendlich weiterscrollt, indem mehr Inhalte geladen werden, während der Benutzer liest.
ARIA: figure-Rolle: Die ARIA figure-Rolle kann verwendet werden, um eine Abbildung innerhalb des Seiteninhalts zu identifizieren, wo entsprechende Semantiken noch nicht existieren. Eine Abbildung wird im Allgemeinen als ein oder mehrere Bilder, Code-Snippets oder andere Inhalte angesehen, die Informationen auf eine andere Weise darstellen als ein regulärer Textfluss.
ARIA: form-Rolle: Die form-Rolle kann verwendet werden, um eine Gruppe von Elementen auf einer Seite zu identifizieren, die eine äquivalente Funktionalität zu einem HTML-Formular bieten. Das Formular wird nicht als Landmarkenbereich exponiert, es sei denn, es hat einen Accessible_name.
ARIA: generic-Rolle: Die generic-Rolle erstellt ein namensloses Containerelement, das keine eigene semantische Bedeutung hat.
ARIA: grid Rolle: Die grid Rolle ist für ein Widget, das eine oder mehrere Zeilen von Zellen enthält. Die Position jeder Zelle ist signifikant und kann mithilfe von Tastatureingaben fokussiert werden.
ARIA: gridcell Rolle: Die gridcell Rolle wird verwendet, um eine Zelle in einem grid oder treegrid zu erstellen. Sie soll die Funktionalität des HTML-Elements td für tabellenartige Gruppierungen von Informationen nachahmen.
ARIA: group Rolle: Die group Rolle identifiziert eine Gruppe von Benutzeroberflächenobjekten, die nicht dazu bestimmt sind, in eine Seitenzusammenfassung oder ein Inhaltsverzeichnis durch unterstützende Technologien aufgenommen zu werden.
ARIA: heading-Rolle: Die heading-Rolle definiert dieses Element als eine Überschrift für eine Seite oder einen Abschnitt, wobei das aria-level-Attribut für mehr Struktur sorgt.
ARIA: img-Rolle: Die ARIA img-Rolle kann verwendet werden, um mehrere Elemente innerhalb von Seiteninhalten zu identifizieren, die als einzelnes Bild betrachtet werden sollten. Diese Elemente könnten Bilder, Code-Snippets, Text, Emojis oder andere Inhalte sein, die kombiniert werden können, um Informationen visuell zu vermitteln.
ARIA: input-Rolle: Die abstrakte Rolle input ist ein generischer Typ von Widget, der Benutzereingaben zulässt.
ARIA: landmark-Rolle: Ein Landmarke ist ein wichtiger Unterabschnitt einer Seite. Die landmark-Rolle ist eine abstrakte Superklasse für die ARIA-Rollenwerte für Inhaltsabschnitte, die so wichtig sind, dass Benutzer wahrscheinlich direkt zu ihnen navigieren möchten.
ARIA: link-Rolle: Ein link-Widget bietet einen interaktiven Verweis auf eine Ressource. Die Zielressource kann entweder extern oder lokal sein, d.h. entweder außerhalb oder innerhalb der aktuellen Seite oder Anwendung.
ARIA: list Rolle: Die ARIA list-Rolle kann verwendet werden, um eine Liste von Elementen zu identifizieren. Sie wird normalerweise in Verbindung mit der listitem-Rolle verwendet, die ein Listenelement innerhalb der Liste identifiziert.
ARIA: listbox-Rolle: Die listbox-Rolle wird für Listen verwendet, aus denen ein Benutzer ein oder mehrere statische Elemente auswählen kann und die im Gegensatz zu HTML-select-Elementen Bilder enthalten können.
ARIA: listitem-Rolle: Die ARIA listitem-Rolle kann verwendet werden, um ein Element innerhalb einer Liste von Elementen zu identifizieren. Sie wird normalerweise in Verbindung mit der list-Rolle verwendet, die einen Listencontainer identifiziert.
ARIA: log-Rolle: Die log-Rolle wird verwendet, um ein Element zu identifizieren, das eine Live-Region erstellt, in der neue Informationen in einer sinnvollen Reihenfolge hinzugefügt werden und alte Informationen verschwinden können.
ARIA: main Rolle: Die main Landmarkenrolle wird verwendet, um den Hauptinhalt eines Dokuments anzuzeigen. Der Hauptinhalt besteht aus Inhalten, die direkt mit dem zentralen Thema eines Dokuments oder der Hauptfunktion einer Anwendung zusammenhängen oder darauf aufbauen.
ARIA: mark Rolle: Die mark Rolle bezeichnet Inhalte, die aus Gründen der Referenz oder Notiz markiert oder hervorgehoben sind, aufgrund der Relevanz des Inhalts im umgebenden Kontext.
ARIA: marquee Rolle: Ein marquee ist eine Art von Live-Region, die nicht-wesentliche Informationen enthält, die sich häufig ändern.
ARIA: math Rolle: Die math-Rolle zeigt an, dass der Inhalt einen mathematischen Ausdruck darstellt.
ARIA: menu Rolle: Die menu-Rolle ist eine Art zusammengesetztes Widget, das dem Benutzer eine Liste von Auswahlmöglichkeiten bietet.
ARIA: menubar Rolle: Ein menubar ist eine Darstellung von menu, die normalerweise sichtbar bleibt und normalerweise horizontal präsentiert wird.
ARIA: menuitem-Rolle: Die menuitem-Rolle zeigt an, dass das Element eine Option in einem Satz von Auswahlmöglichkeiten ist, die von einem menu oder menubar enthalten werden.
ARIA: menuitemradio Rolle: Ein menuitemradio ist ein auswählbares Menüelement in einer Gruppe von Elementen mit derselben Rolle, von denen jeweils nur eines ausgewählt werden kann.
ARIA: meter-Rolle: Die meter-Rolle wird verwendet, um ein Element zu identifizieren, das als Zähler verwendet wird.
ARIA: navigation-Rolle: Die navigation-Rolle wird verwendet, um wichtige Gruppen von Links zu identifizieren, die für die Navigation durch eine Website oder den Seiteninhalt verwendet werden.
ARIA: none Rolle: Die none Rolle ist ein Synonym für die presentation Rolle; beide entfernen die impliziten ARIA-Semantiken eines Elements, sodass sie nicht im Accessibility-Tree angezeigt werden.
ARIA: note-Rolle: Eine note-Rolle deutet auf einen Abschnitt hin, dessen Inhalt ergänzend oder nebensächlich zum Hauptinhalt ist.
ARIA: option Rolle: Die option-Rolle wird für auswählbare Elemente in einer listbox verwendet.
ARIA: Präsentationsrolle: Die presentation Rolle und ihr Synonym none entfernen die impliziten ARIA-Semantiken eines Elements, sodass sie nicht im Barrierefreiheit-Baum dargestellt werden.
ARIA: radio Rolle: Die radio Rolle ist eine von einer Gruppe von auswählbaren Optionsschaltflächen in einer radiogroup, wobei nicht mehr als eine Optionsschaltfläche gleichzeitig ausgewählt sein kann.
ARIA: radiogroup Rolle: Die radiogroup-Rolle ist eine Gruppe von radio-Buttons.
ARIA: range Rolle: Die range abstrakte Rolle ist eine generische Art von Strukturrolle, die einen Bereich von Werten darstellt.
ARIA: region Rolle: Die region Rolle wird verwendet, um Bereiche eines Dokuments zu kennzeichnen, die der Autor als wichtig erachtet. Es handelt sich um ein generisches Landmark, das zur Navigation verwendet werden kann, wenn keine der anderen Landmark-Rollen geeignet ist.
ARIA: roletype-Rolle: Die roletype-Rolle, eine abstrakte Rolle, ist die Basisrolle, von der alle anderen ARIA-Rollen erben.
ARIA: Rolle `timer`: Die timer-Rolle signalisiert unterstützenden Technologien, dass ein Element ein numerischer Zähler ist, der die verstrichene Zeit ab einem Startpunkt oder die verbleibende Zeit bis zu einem Endpunkt angibt. Unterstützende Technologien werden Aktualisierungen eines Timers nicht ankündigen, da dieser eine implizite aria-live-Wert von off hat.
ARIA: Rolle menuitemcheckbox: Ein menuitemcheckbox ist ein menuitem mit einem überprüfbaren Zustand, dessen mögliche Werte true, false oder mixed sind.
ARIA: Rolle progressbar: Die Rolle progressbar definiert ein Element, das den Fortschrittsstatus für Aufgaben anzeigt, die lange dauern.
ARIA: Rolle treeitem: Ein treeitem ist ein Element in einem tree.
ARIA: row Rolle: Ein Element mit role="row" ist eine Zeile von Zellen innerhalb einer tabellarischen Struktur. Eine Zeile enthält eine oder mehrere Zellen, Rasterzellen oder Spaltenüberschriften und möglicherweise eine Zeilenüberschrift innerhalb eines grid, einer table oder einer treegrid und optional innerhalb einer rowgroup.
ARIA: rowgroup Rolle: Ein Element mit role="rowgroup" ist eine Gruppe von Zeilen innerhalb einer Tabellensstruktur. Ein rowgroup enthält eine oder mehrere Zeilen von Zellen, Gitterzellen, Spaltenköpfen oder Zeilenköpfen innerhalb eines grid, table oder treegrid.
ARIA: rowheader-Rolle: Ein Element mit role="rowheader" ist eine cell, die Header-Informationen für eine row innerhalb einer tabellarischen Struktur eines grid, table oder treegrid enthält.
ARIA: scrollbar role: Ein scrollbar ist ein grafisches Objekt, das das Scrollen von Inhalten innerhalb eines Anzeigebereichs steuert.
ARIA: searchbox-Rolle: Die searchbox-Rolle kennzeichnet ein Element als eine Art textbox, die für die Angabe von Suchkriterien vorgesehen ist.
ARIA: section-Rolle: Die section-Rolle, eine abstrakte Rolle, ist eine Superklassenrolle für darstellbare strukturelle Einschlusskomponenten.
ARIA: sectionhead-Rolle: Die sectionhead-Rolle, eine abstrakte Rolle, ist eine Superklasse für die Rolle von Etiketten oder Zusammenfassungen des Themas ihres zugehörigen Abschnitts.
ARIA: select Rolle: Die select Rolle, eine abstrakte Rolle, ist eine Superklassenrolle für Formular-Widgets, die es dem Benutzer ermöglichen, aus einer Reihe von Auswahlmöglichkeiten auszuwählen.
ARIA: separator-Rolle: Die separator-Rolle zeigt an, dass das Element ein Trenner ist, der Abschnitte von Inhalten oder Gruppen von Menüelementen separiert und unterscheidet. Die implizite ARIA-Rolle des nativen thematischen Trennelements <hr> ist separator.
ARIA: Slider-Rolle: Die slider-Rolle definiert eine Eingabe, bei der der Benutzer einen Wert innerhalb eines vorgegebenen Bereichs auswählt.
ARIA: spinbutton-Rolle: Die spinbutton-Rolle definiert eine Art von Bereich, bei dem der Benutzer erwartet wird, aus diskreten Auswahlmöglichkeiten einen Wert zu wählen.
ARIA: status Rolle: Die status Rolle definiert eine Live-Region, die beratende Informationen für den Benutzer enthält, die nicht wichtig genug sind, um als alert bezeichnet zu werden.
ARIA: structure Rolle: Die structure Rolle ist für dokumentarische Strukturelemente.
ARIA: suggestion Rolle: Die suggestion-Rolle kennzeichnet semantisch eine einzelne vorgeschlagene Änderung an einem bearbeitbaren Dokument. Diese sollte auf einem Element verwendet werden, das ein Element mit der insertion-Rolle und eines mit der deletion-Rolle umschließt.
ARIA: switch-Rolle: Die ARIA-switch-Rolle ist funktional identisch mit der checkbox Rolle, außer dass sie statt der Zustände „aktiviert“ und „deaktiviert“, die ziemlich generisch in ihrer Bedeutung sind, die Zustände „ein“ und „aus“ repräsentiert.
ARIA: tab Rolle: Die ARIA-tab-Rolle zeigt ein interaktives Element innerhalb eines tablist an, das, wenn es aktiviert wird, sein zugehöriges tabpanel anzeigt.
ARIA: table-Rolle: Der table-Wert des ARIA-Attributs role identifiziert das Element mit der Rolle als Struktur einer nicht interaktiven Tabelle, die Daten in Zeilen und Spalten ähnlich dem nativen table HTML-Element enthält.
ARIA: tablist Rolle: Die tablist-Rolle identifiziert das Element, das als Container für eine Gruppe von tabs dient. Die Tab-Inhalte werden als tabpanel-Elemente bezeichnet.
ARIA: tabpanel Rolle: Der ARIA tabpanel ist ein Container für die Ressourcen des geschichteten Inhalts, der mit einem tab verbunden ist.
ARIA: term Rolle: Die term Rolle kann für ein Wort oder einen Ausdruck mit einer optionalen entsprechenden definition verwendet werden.
ARIA: textbox Rolle: Die textbox Rolle wird verwendet, um ein Element zu identifizieren, das die Eingabe von Freitext erlaubt. Wann immer möglich, sollten Sie anstelle dieser Rolle ein input Element mit type="text" für einzeilige Eingaben oder ein textarea Element für mehrzeilige Eingaben verwenden.
ARIA: toolbar Rolle: Die toolbar-Rolle definiert das enthaltende Element als eine Sammlung von häufig verwendeten Funktionsschaltflächen oder Steuerelementen, die in kompakter visueller Form dargestellt werden.
ARIA: tree Rolle: Ein tree ist ein Widget, das es dem Benutzer ermöglicht, ein oder mehrere Elemente aus einer hierarchisch organisierten Sammlung auszuwählen.
ARIA: treegrid role: Die treegrid-Rolle identifiziert ein Element als ein Raster, dessen Zeilen auf die gleiche Weise erweitert und reduziert werden können wie bei einem tree.
ARIA: widget role: Die widget-Rolle, eine abstrakte Rolle, ist eine interaktive Komponente einer grafischen Benutzeroberfläche (GUI).
ARIA: window Rolle: Die window Rolle definiert ein Browser- oder App-Fenster.