Zweiter Blick: ARIA Roles


ARIA Roles

Bedeutung von ARIA Roles

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.

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.

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:

<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-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.

Alphabetische Liste verfügbarer ARIA Rollen [in Aufbau]

wf

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.

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.


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 erlaubt und völlig ungefährlich!