Zweiter Blick: ARIA Roles

BarrierefreiheitDarstellungsoptionen



ARIA Roles

Bedeutung von ARIA Roles

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

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.

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.

Und schon gar nicht sollte ARIA eingesetzt werden, um die HTML-Semantik umzudeuten.

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

  • aria-required scheint von Screen Readern besser unterstützt zu werden als das HTML5 Attribut required.
  • Voice Over fügt Formularelementen mit dem Typ range automatisch ein % an. Um das zu vermeiden, kann role="text" verwendet werden.

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 Roles 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)

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.


Baustellenschild

Seite in Aufbau

Sie werden bemerken, dass diese Seite noch nicht fertig ist. Inhalte und Funktionalitäten sind noch nicht gänzlich verfügbar. Sie können aber gerne um die Baustelle herumgehen und den Fortschritt beobachten. Das Betreten der Baustelle ist Ihnen aber schon erlaubt und für Sie völlig ungefährlich!