Alive and Kicking
veröffentlicht in 2014
Live-Regionen
Nach Accessible Rich Internet Applications(ARIA) 1.0 sind Live-Regionen Teile einer Webseite, die aktualisiert werden, ohne dass die Webseite neu geladen wird. Es handelt sich um Bereiche, die
- entweder durch eine Nutzeraktion (z.B. Eingabe)
- oder automatisch (z.B. ein Ticker oder eine Fortschrittsanzeige)
dynamisch aktualisiert werden. Dabei findet die Aktualisierung nicht notwendigerweise dort statt, wo sich der Fokus des Nutzers befindet.
Visuell am Bildschirm stellen Live-Regionen meist kein großes Problem dar, auch wenn sie in manchen Situationen vom Inhalt ablenken können. Für Screenreadernutzer sieht die Situation anders aus. Der Nutzer liest, tippt oder bedient Inhalte auf einer Webseite und verfügt über den Tastaturfokus. Wenn ein anderer Bereich der Seite aktualisiert wird, muss der Screenreadernutzer dahin navigieren, um die veränderten Inhalte zu lesen. Zuvor muss er aber erfahren, dass sich was verändert hat.
Natürlich könnten Screenreader Veränderungen im DOM verfolgen und jegliche Änderung mitteilen - und das tun sie auch teilweise. Das Ergebnis ist eher chaotisch, denn die Aktualisierungen der Seite kommen unstrukturiert daher und schließen oft auch unwesentliche Informationen ein. Deshalb benötigen Screenreader zuverlässige Angaben auf der Webseite, die
- für den Nutzer relevante Änderungen identifizieren und
- Angaben darüber machen, welche Aktualisierungen in welcher Dringlichkeit und Ausführlichkeit dem Nutzer mitgeteilt werden sollen.
Der Schlüssel für barrierefreie Live-Regionen ist das aria-live
-Attribut. Wenn ein oder mehrere Bereiche einer Seite aktualisiert werden, reicht ein einziges Attribut, damit Screenreader über die Veränderungen informiert werden:
<div aria-live="polite">
<p> ... Bereich, der aktualisiert werden kann ...</p>
</div>
Mit dem korrekten Einsatz dieses Attributs kann die Nutzung einer Webseite mit Live-Regionen wesentlich effizienter für einen Screenreadernutzer gestaltet werden, indem der Nutzer nicht zwangsläufig beim Lesen oder Tippen unterbrochen wird oder der Fokus manipuliert werden muss.
So einfach die Grundidee ist, so gibt es zahlreiche weitere Aspekte, die bei Live-Regionen berücksichtigt werden müssen oder auch nicht:
- Zunächst gibt es weitere Attribute, die beim Fine-Tuning von Live-Regionen eingesetzt werden können.
- ARIA ist eine relativ neue Technik und betrifft nicht nur Code, sondern auch das Zusammenspiel zwischen Browser und Betriebssystem einerseits und zwischen Betriebssystem und Screenreader andererseits. Bei so vielen "Akteuren" wird es niemanden wundern, dass noch nicht alles reibungslos funktioniert.
- Darüber hinaus werden einige Rollen in ARIA 1.0 definiert, die bereits als Live-Region funktionieren. Auch HTML5 bietet zwei Elemente, die ebenfalls als Live-Region dienen. Entwickler müssen sich im Klaren sein, welche Situation welche Technik erfordert.
Der Beitrag "Alive and Kicking" besteht aus folgenden einzelnen Webseiten:
ARIA-Attribute für Live-Regionen
Die wichtigsten ARIA-Attribute für Live-Regionen auf Webseiten sind
aria-live
undrole
.Fine-Tuning von ARIA-Live-Regionen
ARIA stellt einige Attribute zur Verfügung, um das Auslesen von Live-Regionen auf Webseiten in Screenreadern zu justieren.