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.
- Wenn vorhanden, sollten Elemente mit inhärenter Semantik verwendet werden. In HTML etwa sollte
<p>verwendet werden und nicht<div role="paragraph">. - Die Rolle eines Elements darf sich nicht zeitbasiert oder durch Aktionen der User ändern. Assistierende Technologien sind darauf noch nicht gefasst (Stand 2016). Um die Rolle eines Elements zu ändern muss das Element samt aller Kindelemente gelöscht werden, und durch das gewünschte neue Element mit der entsprechenden Rolle eingefügt werden.
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:
aria-requiredscheint von Screen Readern besser unterstützt zu werden als das HTML5 Attributrequired.- Voice Over fügt Formularelementen mit dem Typ
rangeautomatisch ein%
an. Um das zu vermeiden, kannrole="text"verwendet werden.
Auswirkungen für assistierende Technologien
Rollenzuweisungen durch HTML-Elemente oder ARIA-Anweisungen wirken sich in folgenden Bereichen auf die Barrierefreiheit aus:
- Beginn und Ende eines Elements sind technisch festgelegt und können von assistierenden Technologien angegeben werden.
- Die Bedeutung einer Rolle kann von assistierenden Technologien ermittelt und dargestellt werden.
Bei Standardkomponenten kann die Bedeutung sogar unabhängig von der Sprache einer Seite durch die eingestellte Standardsprache aus Betriebssystem oder Browser erfolgen.
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)- A type of dialog that contains an alert message, where initial focus goes to an element within the dialog.
(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=applicationTestdateiarticle(Artikel)- wf
(vgl. wf ) - 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 derbanner-Rolle befinden.
(vgl.header-Element in HTML ) - ARIA 1.2 | banner
blockquote(Zitatblock)- wf
(vgl. wf ) - ARIA 1.2 | blockquote
- wf
(vgl. wf ) - ARIA 1.2 | button
cell(Tabellenzelle)- wf
(vgl. wf ) - ARIA 1.2 | cell
checkbox(Kontrollkästchen)- wf
(vgl. wf ) - ARIA 1.2 | checkbox
code(Code)- wf
(vgl. wf ) - ARIA 1.2 | code
columnheader(Spaltenüberschrift)- wf
(vgl. wf ) - ARIA 1.2 | columnheader
combobox- wf
(vgl. wf ) - ARIA 1.2 | combobox
command- Eine Komponente, die eine Aktion auslöst, aber keine Dateneingabe enthält.
- ARIA 1.2 | command
complementary(Nebenstehende Information)- wf
(vgl. wf ) - ARIA 1.2 | complementary
composite(Zusammengesetzte Komponente)- wf
(vgl. wf ) - ARIA 1.2 | composite
contentinfo(Fußbereich)- wf
(vgl. wf ) - ARIA 1.2 | contentinfo
definition(Definition)- wf
(vgl. wf ) - ARIA 1.2 | definition
deletion(Löschung)- wf
(vgl. wf ) - ARIA 1.2 | deletion
dialog(Dialogfeld)- wf
(vgl. wf ) - ARIA 1.2 | dialog
directory(Inhaltsverzeichnis)- wf
(vgl. wf ) - 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)- wf
(vgl. wf ) - ARIA 1.2 | emphasis
feed(Dynamische Liste)- wf
(vgl. wf ) - ARIA 1.2 | feed
figure(Figur)- wf
(vgl. wf ) - ARIA 1.2 | figure
form(Formularbereich)- wf
(vgl. wf ) - ARIA 1.2 | form
generic(Unsemantischer Bereich)- wf
(vgl. wf ) - ARIA 1.2 | generic
grid(Tabelle fokussierbarer Elemente)- wf
(vgl. wf ) - ARIA 1.2 | grid
gridcell(Zelle einer Grid-Komponente)- wf
(vgl. wf ) - ARIA 1.2 | gridcell
group(Gruppe)- wf
(vgl. wf ) - ARIA 1.2 | group
heading(Überschrift)- wf
(vgl. wf ) - 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)- wf
(vgl. wf ) - ARIA 1.2 | input
insertion(Einfügung)- wf
(vgl. wf ) - ARIA 1.2 | insertion
landmark(Seitenbereich)- wf
(vgl. wf ) - ARIA 1.2 | landmark
link(Link)- wf
(vgl. wf ) - 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 HTMLselectElement kann die Liste auch Bilder enthalten. - ARIA 1.2 | listbox
listitem(Listenelement)- wf
(vgl. wf ) - ARIA 1.2 | listitem
log(Dynamische Live-Region)- wf
(vgl. wf ) - ARIA 1.2 | log
main(Hauptbereich)- wf
(vgl. wf ) - ARIA 1.2 | main
marquee(Unwichtige Aktualisierungen)- wf
(vgl. wf ) - ARIA 1.2 | marquee
math(Mathematischer Ausduck)- wf
(vgl. wf ) - ARIA 1.2 | math
meter(Skalierbare Eingabe)- wf
(vgl. wf ) - 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
- wf
(vgl. wf ) - ARIA 1.2 | menubar
- Eine Option in einem Auswahlbereich, welcher in einem Menü oder einer Menüleiste enthalten ist.
- ARIA 1.2 | menuitem
- wf
(vgl. wf ) - ARIA 1.2 | menuitemcheckbox
- wf
(vgl. wf ) - ARIA 1.2 | menuitemradio
- MDN | ARIA: menuitemradio role
- wf
(vgl. wf ) - ARIA 1.2 | navigation
none(Entziehen von Semantik)- wf
(vgl. wf ) - ARIA 1.2 | none
note(Anmerkung)- wf
(vgl. wf ) - ARIA 1.2 | note
option(Auswahlkompnente)- wf
(vgl. wf ) - ARIA 1.2 | option
paragraph(Absatz)- wf
(vgl. wf ) - ARIA 1.2 | paragraph
presentation(Darstellung ohne Semantik)- wf
(vgl. wf ) - 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.
- ARIA 1.2 | progressbar
radio(Auswahlelement)- wf
(vgl. wf ) - ARIA 1.2 | radio
radiogroup(Auswahlgruppe)- wf
(vgl. wf ) - ARIA 1.2 | radiogroup
range(Auswahlbereich)- wf
(vgl. wf ) - ARIA 1.2 | range
region(Seitenbereich)- wf
(vgl. wf ) - ARIA 1.2 | region
roletype(Rollentyp)- wf
(vgl. wf ) - ARIA 1.2 | roletype
row(Tabellenzeile)- wf
(vgl. wf ) - ARIA 1.2 | row
rowgroup(Verschachtelung für Tabellenzeilen)- wf
(vgl. wf ) - ARIA 1.2 | rowgroup
rowheader(Zeilenüberschrift)- wf
(vgl. wf ) - ARIA 1.2 | rowheader
scrollbar(Schieberegler für vertikale Anzeige)- wf
(vgl. wf ) - ARIA 1.2 | scrollbar
search(Suchbereich)- wf
(vgl. wf ) - ARIA 1.2 | search
searchbox(Eingabefeld für Suchkriterien)- wf
(vgl. wf ) - ARIA 1.2 | searchbox
section(Abschnitt)- wf
(vgl. wf ) - ARIA 1.2 | section
sectionhead(Überschriftenkompnente)- wf
(vgl. wf ) - ARIA 1.2 | sectionhead
select(Auswahlkomponente in Formularen)- wf
(vgl. wf ) - ARIA 1.2 | select
separator(Trennstrich)- wf
(vgl. wf ) - 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. - ARIA 1.2 | slider
- wf
(vgl. wf ) - ARIA 1.2 | spinbutton
status(Statusinformation)- wf
(vgl. wf ) - 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-labelundaria-labelledbysind nicht gleichzeitig zulässig. - HTML Äquivalent: HTML strong-Element)
- Verwandte Rolle: emphasis
- ARIA 1.2 | strong
structure(Strukturelement)- wf
(vgl. wf ) - ARIA 1.2 | structure
subscript(tiefgestellt)- wf
(vgl. wf ) - ARIA 1.2 | subscript
superscript.(hochgestellt)- wf
(vgl. wf ) - ARIA 1.2 | superscript.
switch(Ein- und Ausschalter)- wf
(vgl. wf ) - ARIA 1.2 | switch
tab(Steuerelement für Auswahlgruppe)- wf
(vgl. wf ) - ARIA 1.2 | tab
table(Tabelle)- wf
(vgl. wf ) - ARIA 1.2 | table
tablist(Liste von Auswahlelementen)- Container für einen Satz von
tab-Elementen. Der vomtabkontrollierte Bereich befindet sich in einemtabpanel.
Entsprechend muss jedetablistmindestens eintab-Element enthalten. - ARIA 1.2 | tablist
tabpanel(Container für einzublendende Inhalte)- wf
(vgl. wf ) - ARIA 1.2 | tabpanel
term(Fachausdruck)- wf
(vgl. wf ) - 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)- wf
(vgl. wf ) - ARIA 1.2 | time
timer(Wecker)- wf
(vgl. wf ) - ARIA 1.2 | timer
toolbar(Werkzeugleiste)- wf
(vgl. wf ) - ARIA 1.2 | toolbar
tooltip(Popup Hinweis)- wf
(vgl. wf ) - ARIA 1.2 | tooltip
tree(Steuerlement für hierarchische Auswahl)- wf
(vgl. wf ) - ARIA 1.2 | tree
treegrid(Ausklappen untergeordneter Elemente)- wf
(vgl. wf ) - ARIA 1.2 | treegrid
treeitem(Element in Baumstruktur)- wf
(vgl. wf ) - ARIA 1.2 | treeitem
widget(Interaktive Komponente)- wf
(vgl. wf ) - ARIA 1.2 | widget
window(Anwendungsfenster)- wf
(vgl. wf ) - ARIA 1.2 | window
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ü Anweisungen für Anwendungen
menubar - Das Hauptmenü einer Webanwendung
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.
Links zu menubar
- [W3C]WAI ARIA Roles Model: Menubar
- [W3C] Using WAI-ARIA > Managing Focus (Hinweise zur Tastturbedienbarkeit)
- [WAI ARIA Authoring Practises 1.1] Menu or Menu bar
menuitem - Das Menüelement einer Webanwendung
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.
- WAI ARIA
role="presentation"Spezifikation - WAI ARIA
role="none"Spezifikation - Know your ARIA: 'Hidden' vs 'None' (Scott O'Hara 2018)
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.