ARIA 101

Es gibt nicht für alle modernen Komponenten ein natives HTML-Element mit eingebauter Semantik, z.B. für Tabs. Hier muss das HTML nachgerüstet werden. Das ist einfach - mit ARIA.

Aber Vorsicht:
No ARIA is better than Bad ARIA.

WAI-ARIA

WAI-ARIA ist ein Akronym für
Web Accessibility Initiative – Acessible Rich Internet Applications.

ARIA ist ein Web-Standard, der ein Set von Attributen definiert, die HTML erweitern. Diese Attribute fügen semantische Rollen, Status und Eigenschaften zu HTML hinzu, damit diese besser von AT verstanden werden können.

ARIA Attribute können benutzt werden, um explizit die implizite Semantik von HTML Elementen zu modifizieren. Sie können allerdings die Art, wie ein Element von AT wahrgenommen wird, völlig verändern.

ARIA steht nicht in Konkurrenz zu HTML, ARIA ergänzt HTML Semantik, es ersetzt kein HTML und ändert auch nicht sein Verhalten. Manche Attribute entsprechen genau einem bestimmten HTML-Element, andere stellen Semantik zur Verfügung, wenn kein natives HTML-Element existiert oder wenn es Lücken in der Implementierung gibt.

HTML-Elemente, die eine implizite ARIA-Rolle haben, bekommen im accTree automatisch die entsprechende ARIA-Rolle zugewiesen. Ein zusätzliches, explizites Zuweisen der ARIA-Rolle ist nicht nötig bzw. sollte unterbleiben.

»Affordance«

ARIA hat eine Analogie zu CSS für AT. CSS erzeugt visuelle Affordances für sehende User. ARIA erzeugt »semantische Affordances«. Es malt ein nicht-sichbares Bild der Seite für Screen-Reader User.

Affordance (Übersetzungsversuch: Aufforderungscharakter): Die Qualität oder Eigenschaft eines Objekts, das seine möglichen Nutzungen definiert oder klar macht, wie es benutzt werden kann oder soll

ARIA-Attribute

Überblick über die ARIA-Attribute: WAI-ARIA Overview.

ARIA-Attribute:

  • Roles/Rollen
  • States/Status
  • Properties/Eigenschaften

States und Properties haben ein "aria-"-Präfix

Rollen

ARIA Rollen beschreiben, was ein Element ist, was gleichbedeutend ist mit einem Hinweis, wie es gedacht ist, dass es benutzt werden soll. Manche Rollen spiegeln native HTML Semantik, andere »pollyfillen« fehlende Semantik in HTML. Z.B. gibt es zur Zeit kein natives HTML-Element für Tablisten, daher wird die ARIA-Rolle tablist verwendet, um die fehlende Semantik zu ergänzen.

<div class="tabs-component">
  <div role="tablist" aria-label="Programming Languages">
    <button role="tab" aria-selected="true" id="js">JavaScript</button>
    <button role="tab" aria-selected="false" id="php">PHP</button>
    <button role="tab" aria-selected="false" id="ruby">Ruby</button>
  </div>
  <section role="tabpanel" aria-labelledby="js">JavaScript is great!</section>
  <section role="tabpanel" aria-labelledby="php" hidden>PHP is great!</section>
  <section role="tabpanel" aria-labelledby="ruby" hidden>Ruby is great!</section>
</div>
JavaScript is great!

Skript einfügen!

ARIA-Rollen sind nur im AccTree sichtbar, haben aber keine Auswirkung auf das DOM. Sie zeichnen zwar ein Element als interaktiv aus, machen es aber nicht interaktiv. Das muss mit JavaScript gemacht werden.

Arten von ARIA-Rollen

Die Spezifikation teilt die Rollen in sechs verschiedene Kategorien:

  • Abstrakte Rollen: sind sozusagen die Bauteile für andere Rollen. Sie sind nicht dafür gedacht, im Inhalt verwendet zu werden.
  • Landmark Rollen: repräsentieren Landmark Regionen, Schlüsselzonen, die als Navigationshilfe verwendet werden
  • Dokument Struktur Rollen: beschreiben Elemente, die die Struktur der Seite bilden (Überschriften, Artikel, Listen, Bilder, ...)
  • Widget Rollen: beschreiben interaktive, hauptsächlich auf JavaScript basierende UI-Komponenten wie Tabs, Schalter, Menüs, ... sie fügen kein Verhalten hinzu!
  • Live Region Roles: identifizieren Inhaltsblöcke, die dynamisch aktualisiert werden und abseits des restlichen Inhalts präsentiert werden sollen
  • Window Roles: beschreiben »Fenster« im Browser, wie z.B. ein Modal

Wenn semantisches HTML so verwendet wird, wie es gedacht ist, braucht man in der täglichen Arbeit nur eine Handvoll ARIA Attribute.

Status/State

Status-Attribute werden verwendet, um den Zustand eines Elements zu beschreiben. Beispiele: aria-pressed="true" für einen gedrückten Button, aria-expanded="false" für ein aktuell nicht ausgeklapptes Menü oder aria-expanded="true" für ein ausgeklapptes Panel. aria-current="page" markiert die aktuell geöffnete Seite in einer Navigation. Alle diese Statusänderungen benötigen JavaScript. JavaScript ist unumgänglich zur Erstellung von accessible custom interaktiven Komponenten, der Status sollte also mittels JavaScript hinzugefügt oder entfernt werden.

Progressive enhancement is the most inclusive stragegy.

Eigenschaften/Properties

Eigenschaften beschreiben Name, Beschreibung, aktueller Wert oder die Beziehung zu anderen Elementen. Im Unterschied zum Status bleiben die Eigenschaften meist gleich. Eigenschaften mit Werten ändern sich, wenn der User die Werte ändert. Beispiele sind aria-controls="agreement"+id="agreement" - angewendet auf zwei Elemente, die zusammengehören (das Element, an dem es angewendet wird und das Element, auf das es zeigt), aria-hidden="true" das verwendet wird, um ein Element nicht im accTree anzuzeigen und so vor einem Screenreader zu verstecken, aria-label="Submit" stellt einen accName für ein Element zur Verfügung, aria-labelledby="label" bzw. aria-describedby="pass_hint" zeigen auf Elemente, die das ausgezeichnete Element benennen oder beschreiben

Strikte Regeln

Die Regeln zur Anwendung von ARIA Attributen sind sehr strikt:

  • Rollen, Status und Eigenschaften sind nicht alle für alle HTML-Elemente anwendbar. Manche sind nur für ein Subset von HTML-Elementen erlaubt. Andere sind wiederum global und können für die meisten HTML-Elemente verwendet werden. Document conformance requirements
  • Es gibt strikte Eltern-Kind-Beziehungen zwischen manchen ARIA Attributen z.B. role="tab" muss immer ein Kind von role="tablist"sein
  • ARIA ist begrenzt. Es ist nicht möglich, eigene Rollen zu definieren.
  • ARIA Attribute können unerwünschte Nebeneffekte haben. (XXX Minute 18)

ARIA ist sehr mächtig – aber auch sehr gefährlich, wenn man nicht weiß, was man macht. Wird ein ARIA-Attribut auf ein falsches Element angewendet, wird auch die Semantik der Kindelemente geändert (Element wird presentational). Nachzulesen ist das in der ARIA Spezification/children presentational property. Die ARIA Spezification dokumentiert die Anforderungen für ARIA Rollen und die Definition für jede Rolle und jedes Attribut (z.B. für das button-Element). Die ARIA in HTML Specifiation definiert die Konformitätsregeln zur Benutzung von ARIA in HTML. Diese Regeln definieren, welche Konformitätstests Tools testen sollen. Als Entwickler sollte man sich dieser Regeln auch bewusst sein.

What does ARIA do?

ARIA stellt semantische Bedeutung über Rollen, Status und Eigenschaften zur Verfügung, egal, ob es ein HTML-Äquivalent dazu gibt oder nicht. ARIA ergänzt (oder ändert) die accInformation eines Elements im accTree.
Wir können ARIA benutzen um

  • Semantik zu kreieren oder zu modifizieren
  • Werte zu definieren und (im accTree) zu zeigen
  • accNames und accDescriptions zur Verfügung zu stellen
  • Status zu definieren und anzuzeigen
  • Eigenschaften zu definieren und anzuzeigen
  • anzukündigen, wenn dynamische Inhaltsänderungen auf der Seite passieren
  • und statische Inhalte in dynamische, interaktive Widgets mit progressive Enhancement aufwerten (Accordeon, Tabs, ...)

Was macht ARIA nicht?

  • ARIA fügt kein Verhalten oder Funktionalität hinzu. Der Browser fügt ebenfalls kein interaktives Verhalten hinzu.
  • Es beeinflusst das DOM nicht. Das DOM-Verhalten wird immer noch von der Semantik des nativ verwendeten HTML-Elements bestimmt.
  • Custom Components mit custom key combinations: die kennt der Screenreader nicht. ARIA Status und Eigenschaften können nicht von selbst auf die User-Interaktionen reagieren. JavaScript ist zwingend nötig, um zugängliche interaktive custom components zu erstellen (solange keine nativen HTML controls verwendet werden)
  • ARIA beeinflusst nicht in allen AT, wie ein Element präsentiert wird. ARIA "gilt" nur im accTree. ATs, die ihre Information nicht aus dem accTree beziehen, bekommen diese Informationen nicht (z.B. Windows High Contrast Mode bekommt die Infos nicht aus dem accTree).

ARIA ist ein Versprechen. Das Versprechen sollte nicht gebrochen werden. Und wenn HTML das auch kann, mach es damit.

ARIA ist eine Spachtel, kein Betonstahl. (– Eric Bailey)

Support in Browsern und Screenreadern

Der Support variiert zwischen Plattformen, accAPIs, Browsern und AT. ARIA Unterstützung kann nicht getestet werden.
Daher:

  • Verlass dich auf native HTML Semantik
  • Benutze so wenig ARIA wie möglich
  • Teste mit verschiedenen Browsern und ATs

ARIA kann Kompatiblitätsprobleme haben. Viele Screen-Reader-User benutzen ältere Versionen ihrer Screenreader, um diese Probleme zu minimieren.

Links