Landmark roles mit HTML5 und ARIA veröffentlicht in 2012/2016

Die Besonderheit der ARIA-Rolle application

Die ARIA-Rolle application wird in der Praxis gerne missverstanden. Diese Rolle ist für Widgets vorgesehen, für die es keine widget role gibt.

Hintergrund

Screenreader verfügen über verschiedene Modi, um in verschiedenen Situationen die beste Zugänglichkeit zu ermöglichen. Obwohl Screenreader meist über mehr als zwei Modi verfügen, ist die folgende Unterscheidung wichtig:

Die Bestimmung einer Webseite oder eines Teilbereichs der Webseite als "application" erzwingt einen Bedienmodus (und deaktiviert zwangsläufig die strukturelle Navigation des Screenreaders). Folglich können nur noch aktive Elemente wie Links oder Formulare per Tab-Taste bedient werden. Andere Texte können in einem Screenreader nicht mehr ohne Weiteres gelesen werden.

Richtige Rollen und Fokus-Management

Durch den unvorsichtigen Einsatz der Rolle "application" wird die Barrierefreiheit von Anwendungen stark beeinträchtigt, wenn kein alternatives Bedienkonzept für Tastaturnutzer und insbesondere Screenreader-Nutzer bereitgestellt wird. Für viele "Anwendungen" gibt es widget roles, aber auch dort kommt die Tastaturbedienung nicht "out of the box". Vielmehr müssen die benötigten Tastenschläge Extern, englischsprachig: mit einem Fokus-Management abgefangen werden.

Es wird mit Sicherheit Fälle geben, wo die Rolle "application" für eine ganze Webseite begründet werden kann. Weil in einem Bedienmodus im Prinzip nur die Tabulatortaste verfügbar ist, um sich im Screenreader fortzubewegen, müssen die Bereiche der Seite, die "normalen Text" vorweisen, als nicht Teil der Anwendung identifiziert werden. Dann wird es Screenreadernutzern ermöglicht, Zugriff auf die Inhalte zu erhalten. Neben der Kennzeichnung von Textbereichen mit der Rolle "document" ist auch sicherzustellen, dass aus dem Anwendungsbereich in den Dokumentenbereich per Tabulatortaste gesprungen werden kann.

Der Fall (Webseite als Anwendung) dürfte in der Praxis nicht so oft vorkommen. I.d.R. sind die Inhalte einer Webanwendung normale Steuerelemente oder sie lassen sich mit den widget roles abbilden. Und auch wenn es Regionen einer Seite gibt, die erst mit der Rolle "application" semantisch richtig bestimmt werden, so wird das meistens ein Teilbereich der Webseite sein.

Wenn eine Anwendung innerhalb einer Webseite vorkommt, so müssen Screenreader diese identifizieren können. Dafür muss der Bereich der Seite mit der Rolle "application" gekennzeichnet werden. Wenn innerhalb solcher Regionen Texte vorkommen, die weder Teil eines Steuerelements noch eines Links sind und somit mit der Tabulatortaste nicht erreicht werden können, dann müssen solche Texte mittels aria-labelledby und aria-describedby mit Links und Steuerelementen verknüpft werden; alternativ muss ein Fokus-Management implementiert werden, dass die Navigation eines Screenreaders ersetzt. Im folgenden Beispiel können die Überschrift und der Absatz über solche Verknüpfungen zugänglich gemacht werden:

<div role="application" aria-labelledby="meineBezeichnung" aria-describedby="meineAnleitung" tabindex="0">

  <h6 id="meineBezeichnung">Drehen Sie die Uhr vorwärts!</h6>

  <p id="meineAnleitung">Drücken Sie PfeilLinks und PfeilRechts, um die Zeit zurück oder vorzudrehen; drücken Sie PfeilOben oder PfeilUnten, um zwischen Jahren, Monaten, Tagen, Stunden und Minuten zu wechseln.</p>

  ... interaktive Anwendung mit eigenem Fokus-Management ...

</div>

Weitere Hinweise und Erläuterungen zur Rolle "application" können in einem Extern: Beitrag von Marco Zehe nachgelesen werden.