ARIA
Schematische Darstellung: Person mit weißem Stock gelangt über ein Boddenleitsystem zu einem Aufmerksamkeitsfeld

ARIA Roles
[Materialsammlung]

ARIA steht für Accessible Rich Internet Applications. Sie werden von der Web Accessibility Initiative (WAI) des World Wide Web Consortium entwickelt. Es handelt sich dabei um einen Standard, der explizit das Arbeiten mit assistierenden Technologien unterstützen soll.

In HTML genügt es oft schon, das richtige Markup Element zu verwenden, um dem Screen Reader Namen, Rolle und Zustand verständlich zu machen. Für Fälle, in denen dies nicht gewährleistet ist, wurden für mögliche Rollen von Seitenelementen von der WAI die ARIA Roles entwickelt.

Was etwas auf einer Webseite ist, wozu es dient und in welchem Zustand es sich befindet, ist visuell intuitiv verständlich, sofern die grafische Darstellung einer Webseite und ihrer Elemente nicht ganz blöd gemacht ist. Für Screen Reader hingegen müssen Name, Rolle (role) und Zustand (state) technisch wahrnehmbar gemacht werden.

Verwendung der ROLE-Attribute

Allgemeine Hinweise zur Verwendung von ARIA Roles

Ich fasse hier die wesentlichen normativen Hinweise der WAI zusammen.

[W3C] The Roles Model

Verwendung von ARIA in HTML

Grundsätzlich sollte ARIA nicht zu HTML-Markup hinzugefügt werden, wenn dieses schon die gewünschte Semantik impliziert:

<button role="button">

Schon gar nicht sollte ARIA eingesetzt werden, um die HTML-Semantik umzudeuten:

<button role="link">

Leider verhalten sich Screen Readern gelegentlich merkwürdig, sodass eine Ergänzung von Attributen oder Umdeutung von Elementen durch ARIA notwendig erscheint:

Auswirkungen für assistierende Technologien

Rollenzuweisungen durch HTML-Elemente oder ARIA-Anweisungen wirken sich in folgenden Bereichen auf die Barrierefreiheit aus:

Alphabetische Liste verfügbarer ARIA Rollen

alert (Warnung)
Typ einer Live Region mit wichtiger gewöhnlich aktuell relevanter Information.
(vgl. alertdialog, status)
ARIA 1.2 | alert
alertdialog (Warnung in Dialogfeld)

(vgl. alert, dialog )
ARIA 1.2 | alertdialog
application (Anwendung)
Weist einem Element und dessen Kindelementen den Anwendungsmodus zu (im Gegensatz zum Dokumentenmodus).
Insbesondere ändern sich dadurch Navigationsmechanismen und Tastaturfunktionalitäten im Browser.
ARIA 1.2 | application
MDN | ARIA: application role
role=application Testdatei
article (Artikel)
ARIA 1.2 | article
Ein Bereich (landmark) mit Inhalten, die sich überwiegend am Webauftritt und nicht der jeweiligen Webseite orientieren.
Innerhalb eines Dokuments oder einer Applikation sollte sich jeweils nur ein Element mit der banner-Rolle befinden.
(vgl. header-Element in HTML )
ARIA 1.2 | banner
blockquote (Zitatblock)
ARIA 1.2 | blockquote
button (Schalter)
ARIA 1.2 | button
cell (Tabellenzelle)
ARIA 1.2 | cell
checkbox (Kontrollkästchen)
ARIA 1.2 | checkbox
code (Code)
ARIA 1.2 | code
columnheader (Spaltenüberschrift)
ARIA 1.2 | columnheader
combobox
ARIA 1.2 | combobox
command
Eine Komponente, die eine Aktion auslöst, aber keine Dateneingabe enthält.
ARIA 1.2 | command
complementary (Nebenstehende Information)
ARIA 1.2 | complementary
composite (Zusammengesetzte Komponente)
ARIA 1.2 | composite
contentinfo (Fußbereich)
ARIA 1.2 | contentinfo
definition (Definition)
ARIA 1.2 | definition
deletion (Löschung)
ARIA 1.2 | deletion
dialog (Dialogfeld)
ARIA 1.2 | dialog
directory (Inhaltsverzeichnis)
ARIA 1.2 | directory
document (Dokument)
Fokussierbarer Inhalt für assistierende Technologien innerhalb gemischter Inhalte oder einer Anwendung.
(vgl. application )
ARIA 1.2 | document
MDN | ARIA: document role
emphasis (Hervorhebung)
ARIA 1.2 | emphasis
feed (Dynamische Liste)
ARIA 1.2 | feed
figure (Figur)
ARIA 1.2 | figure
form (Formularbereich)
ARIA 1.2 | form
generic (Unsemantischer Bereich)
ARIA 1.2 | generic
grid (Tabelle fokussierbarer Elemente)
ARIA 1.2 | grid
gridcell (Zelle einer Grid-Komponente)
ARIA 1.2 | gridcell
group (Gruppe)
ARIA 1.2 | group
heading (Überschrift)
ARIA 1.2 | heading
img (Container als Bild)
Eine Komponente mit role="img" wird als ein Bild aus den Kindelementen der Komponente interpretiert.
ARIA 1.2 | img
input (Eingabeelement)
ARIA 1.2 | input
insertion (Einfügung)
ARIA 1.2 | insertion
landmark (Seitenbereich)
ARIA 1.2 | landmark
ARIA 1.2 | link
list (Liste)
Ausnahmsweise kann eine redundante Verwendung in einer HTML-Liste zweckmäßig sein, wenn die Aufzählungszeichen mittels CSS ausgeblendet werden, weil Safari ansonsten die Listensemantik ignoriert: 
 <ul
   role="list"
   style="list-style-type: none;" >
Scott O’Hara | "Fixing" Lists
ARIA 1.2 | list
listbox (Auswahlkomponente)
Liste, aus der User*innen ein oder mehrere Elemente auswählen können.
Im Gegensatz zum HTML select Element kann die Liste auch Bilder enthalten.
ARIA 1.2 | listbox
listitem (Listenelement)
ARIA 1.2 | listitem
log (Dynamische Live-Region)
ARIA 1.2 | log
main (Hauptbereich)
ARIA 1.2 | main
marquee (Unwichtige Aktualisierungen)
ARIA 1.2 | marquee
math (Mathematischer Ausduck)
ARIA 1.2 | math
meter (Skalierbare Eingabe)
ARIA 1.2 | meter
Häufig eine Liste allgemeiner Aktionen oder Funktionalitäten, die bei der Nutzung ausgelöst werden können.
Angemessen für Komponenten vergleichbar dem Menü eines Anwendungsprogramms, nicht jedoch für eine Sammlung von Navigationslinks.
Enthält Elemente mit der Rolle menuitem
ARIA 1.2 | menu
ARIA 1.2 | menubar
Eine Option in einem Auswahlbereich, welcher in einem Menü oder einer Menüleiste enthalten ist.
ARIA 1.2 | menuitem
ARIA 1.2 | menuitemcheckbox
ARIA 1.2 | menuitemradio
MDN | ARIA: menuitemradio role
ARIA 1.2 | navigation
none (Entziehen von Semantik)
ARIA 1.2 | none
note (Anmerkung)
ARIA 1.2 | note
option (Auswahlkompnente)
ARIA 1.2 | option
paragraph (Absatz)
ARIA 1.2 | paragraph
presentation (Darstellung ohne Semantik)
ARIA 1.2 | presentation
progressbar (Fortschrittsbalken)
Element zur Darstellung des Fortschrittsstatus für Aufgaben, die eine längere Zeit andauern.
Damit erfahren Nutzer*innen, dass die angeforderte Aktion erfolgt, jedoch noch einen angegebenen Zeitraum bis zum Abschluss erfordert.
Im Gegensatz zu einem Slider (Schieberegler) ist ein Progressbar kein Steuerelement (input).
ARIA 1.2 | progressbar
radio (Auswahlelement)
ARIA 1.2 | radio
radiogroup (Auswahlgruppe)
Art einer Auswahlliste, die nur eine einzelne Auswahl erlaubt.
(vgl. radio )
ARIA 1.2 | radiogroup
range (Auswahlbereich)
ARIA 1.2 | range
region (Seitenbereich)
ARIA 1.2 | region
roletype (Rollentyp)
ARIA 1.2 | roletype
row (Tabellenzeile)
ARIA 1.2 | row
rowgroup (Verschachtelung für Tabellenzeilen)
ARIA 1.2 | rowgroup
rowheader (Zeilenüberschrift)
ARIA 1.2 | rowheader
scrollbar (Schieberegler für vertikale Anzeige)
ARIA 1.2 | scrollbar
ARIA 1.2 | search
ARIA 1.2 | searchbox
section (Abschnitt)
ARIA 1.2 | section
sectionhead (Überschriftenkompnente)
ARIA 1.2 | sectionhead
select (Auswahlkomponente in Formularen)
ARIA 1.2 | select
separator (Trennstrich)
ARIA 1.2 | separator
slider (Schieberegler)
Eingabeelement für Nutzer*innen zur Auswahl eines Wertes innerhalb einer vorgegebenen Variationsbreite.
Der Regler zeigt den aktuellen Wert und den Bereich möglicher Werte durch die Größe des Regelbereichs und die Position des Einstellzeigers an.
Typischerweise lässt sich der Wert durch Pfeiltasten erhöhen oder herabsetzen.
(vgl. progressbar (Fortschrittsbalken)
ARIA 1.2 | slider
spinbutton (Auswahlkompnente für vorgegebene Werte)
ARIA 1.2 | spinbutton
status (Statusinformation)
ARIA 1.2 | status
strong (Vorrangiger Inhalt)
Wichtiger, ernster oder dringlicher Inhalt.

Die Rolle ist nicht geeignet zur Änderung der Zeichendarstellung (fett).

Die Eigenschaften aria-label und aria-labelledby sind nicht gleichzeitig zulässig.

HTML Äquivalent: HTML strong-Element)
Verwandte Rolle: emphasis
ARIA 1.2 | strong
structure (Strukturelement)
ARIA 1.2 | structure
subscript (tiefgestellt)
ARIA 1.2 | subscript
superscript. (hochgestellt)
ARIA 1.2 | superscript.
switch Umschalter)
Schalter mit den Zuständen "An" und "Aus"
Gelegentlich wird eine solche Komponente entsprechend deren Mechanismus auch als toggle-Schalter bezeichnet.
(vgl. checkbox mit den Zuständen "Gewählt" und "Nicht gewählt" )
Als visueller Indikator für den Zustand dient ein längliches Oval mit einem Kreis.
Befindet sich der Kreis links im Oval, bedeutet dies, dass der Schalter "Aus" ist.
Switch Schalter mit rotem Kreis links
Befindet sich der Kreis rechts im Oval, bedeutet dies, dass der Schalter "An" ist.
Switch Schalter mit grünem Kreis rechts
ARIA 1.2 | switch
tab (Steuerelement für Auswahlgruppe)
Beschriftung eines Elements zur Auswahl in einer Gruppe von Registerkarten.
(vgl. tablist )
ARIA 1.3 | tab role
table (Tabelle)
ARIA 1.3 | table
tablist (Liste von Auswahlelementen)
Container für einen Satz von tab-Elementen. Der vom tab kontrollierte Bereich befindet sich in einem tabpanel.
Entsprechend muss jede tablist mindestens ein tab-Element enthalten.
ARIA 1.2 | tablist
tabpanel (Container für einzublendende Inhalte)
ARIA 1.2 | tabpanel
term (Fachausdruck)
ARIA 1.2 | term
textbox (Texteingabe)
Eingabefeld, das freie Texteingabe in Formularen erlaubt.

Zulässig sind bei entsprechender technischer Realisierung einzeilige oder mehrzeilige Eingaben (vgl. aria-multiline). Je nachdem dient die Enter-Taste zum Absenden der Formulardaten oder zum Einfügen eines Absatzumbruchs.

Diese Rolle ist für Sprachen vorgesehen, die anders als HTML über kein Element zur Eingabe verfügen (input, textarea). Theoretisch könnte es auch in HTML eingesetzt werden, um die Semantik eines anderen Elements zu überschreiben, was jedoch vermieden werden sollte.
vergleiche Rollen input, searchbox
ARIA 1.2 | textbox
time (Zeitpunkt)
ARIA 1.2 | time
timer (Wecker)
ARIA 1.2 | timer
toolbar (Werkzeugleiste)
ARIA 1.2 | toolbar
tooltip (Popup Hinweis)
ARIA 1.2 | tooltip
tree (Steuerlement für hierarchische Auswahl)
ARIA 1.2 | tree
treegrid (Ausklappen untergeordneter Elemente)
ARIA 1.2 | treegrid
treeitem (Element in Baumstruktur)
ARIA 1.2 | treeitem
widget (Interaktive Komponente)
ARIA 1.2 | widget
window (Anwendungsfenster)
ARIA 1.2 | window

W3C ARIA 1.2 Spezifikation

Seitenbereiche kennzeichnen mit ARIA Roles

Landmark Roles - Die maßgeblichen Bereiche einer Webseite

Landmark Roles sind Attribute für ganze Seitenbereiche, die überwiegend die Navigation für Screen Reader erleichtern. Die Bedeutung und Verwendung erarbeite ich im in der obigen Überschrift verlinkten eigenen Webartikel.

group – Kennzeichnen eines kleinen Bereichs von Funktionalitäten

Mit dem Attribut role="group" wird ein Bereich mit Bedienungselementen (User Interface Objects) gekennzeichnet. Die Verwendung ist mit fieldset in HTML vergleichbar.

Als Faustregel zur Abgrenzung von role="region" gilt, dass der Bereich nicht so wichtig sein sollte, dass er gegebenenfalls auch in einem Inhaltsverzeichnis angeführt werden müsste.

Das Attribut liefert nur die semantische Information und noch keine Beschriftung, wie es etwa in einem fieldset mit dem Element legend realisiert werden kann. Eine vergleichbare Beschriftung muss daher gewährleistet werden, auf die gegebenenfalls auch mit aria-describedby referenziert werden kann.

Menüs sind Bedienungselemente in Webanwendungen (Applications). Die ARIA Rollen müssen in einfachen Navigationsbereichen, die mit HTML realisiert sind, nicht angewendet werden.

Ein Menü besteht üblicherweise aus einem Hauptmenü, das immer sichtbar ist, und Unterpunkten zu den einzelnen Hauptmenüpunkten. Die einzelnen Unterpunkte sollten konsistent in der Erscheinung und der Anordnung verbleiben. Das Hauptmenü ist im englischen die menu bar.

Typischerweise wird eine Menu Bar am Bildschirm horizontal dargestellt, ähnlich wie Hauptmenüpunkte in einer Desktop Anwendung.

Ein menuitem ist ein Auswahlelement in einem Menü oder einer Menu Bar (Hauptnavigation).

Menüelemente müssen einem Menü oder einer Menu Bar technisch so zugeordnet werden, dass deren Zuordnung (owned) für Screen Reader klar ist.

Wenn ein einzelnes Menüelement über ein Untermenü verfügt, sollte dies durch das Attribut aria-haspopup="true" angezeigt werden. Das Untermenü sollte durch Aktivieren des Menüelements eingeblendet werden.

Ein Menu Item kann mit dem ARIA Attribut aria-disabled deaktiviert werden.

Menüelemente können durch separator oder etwa das HTML TAG <hr /> getrennt und damit quasi gruppiert werden.

Seitenelemente (Blockelemente)

note - Anmerkungen (ARIA Role)

Beiläufige Anmerkungen oder hilfreiche Zusatzinformationen können mit role="note" semantisch als solche gekennzeichnet werden.

Meines Wissens gibt es dafür kein vergleichbares HTML-Element, weshalb der Einsatz dieses ARIA-Attributs durchaus auch für HTML-Elemente zu empfehlen ist.

Der Screen Reader JAWS informiert über die Rolle des Bereiches als Notiz, und zwar für den Beginn, als auch das Ende des entsprechenden Bereichs (Version 17).

presentation / none - Verbergen der HTML-Semantik eines Elements

Mittels des Attributs role="presentation" kann für Screen Reader die natürliche (HTML)-Semantik verborgen werden. Dies ist insbesondere zweckmäßig, wenn die Semantik nur der visuellen Formatierung dient, etwa bei Layout-Tabellen .

Seit ARIA 1.1 steht auch role="none" mit exakt derselben Funktion zur Verfügung. Dadurch sollte die Verwirrung beseitigt werden, die durch den Ausdruck Präsentation vielfach entsteht. Solange die Implementierung von ARIA 1.1 noch nicht sicher gewährleistet ist, empfiehlt die W3C jedoch role="presentation" zu verwenden. (Stand Juni 2018)

Ich habe die Beobachtung gemacht, dass das Attribut keine Wirkung auf Formularelemente hat.

separator - Trennlinien

Was aus HTML als HR-Tag bekannt ist, kann mit role="separator" realisiert und sogar dynamisiert werden. Die Zweckmäßigkeit des Einsatzes sollte jedoch auf dem Hintergrund der visuellen und technischen Anforderungen gut reflektiert werden.