Websites sind schon lange keine statischen Konstrukte mehr. Sie verändern sich ständig, zeigen Fehler oder Erfolgsmeldungen dynamisch an oder aktualisieren live einen Chat mit dem Support. Doch wie schafft man es, dass diese Änderungen auch Nutzer von Screenreadern erreichen? Hier kommt die ARIA Live Region ins Spiel. Doch was ist das und wie setzt man es richtig ein, um die Barrierefreiheit der Website wirklich zu verbessern?
Was ist ARIA?
Bevor wir in die spannende Welt der Live Regionen eintauchen, werfen wir erst einmal einen kurzen Blick darauf, was ARIA eigentlich ist. ARIA steht für Accessible Rich Internet Applications und ist im Grunde eine Sammlung von Attributen, die Webentwickler nutzen können, um ihre Seiten barrierefreier zu gestalten. Es gibt Webseiten eine zusätzliche Möglichkeit, mit Screenreadern zu kommunizieren. So können Zustände und Eigenschaften von Inhaltselementen beschrieben werden, die über die Möglichkeiten von HTML-Elementen hinausgehen. In einem älteren Beitrag habe ich mich schon einmal intensiver mit dem Einsatz von ARIA Rollen und Attributen befasst.
Die wichtigste Regel, die man sich jedoch merken muss ist: Falls möglich, verwende kein ARIA.
Unerwartet? Hintergrund ist, dass semantisch richtig eingesetzte HTML-Elemente immer noch die beste Barrierefreiheit bieten. Es ergibt also keinen Sinn, ein <span> mithilfe von ARIA-Attributen und JavaScript zum Link zu machen, wenn man auch einen Link nehmen kann.
Es gibt aber Fälle, in denen ARIA eine wichtige Ergänzung darstellt. Eine dieser Funktionen sind die sogenannten Live Regionen oder Live Regions, die wir uns heute genauer anschauen.
Dynamischer Inhalt dank ARIA Live Region
Wie oft ändern sich Inhalte auf Webseiten in Echtzeit? Viele von uns sind inzwischen daran gewöhnt, dass sich Informationen mit oder ohne unser Zutun aktualisieren. Formulare werden abgesendet und erhalten Fehler- oder Erfolgsmeldungen. Ein Ticket wird nur für einen bestimmten Zeitraum reserviert und ein Countdown zählt die verbleibende Zeit für die Buchung runter. Die Anzahl der Elemente im Warenkorb wird verändert. Sehende Menschen nehmen diese aktualisierten Informationen meist über das periphere Sehen wahr, also eher nebenbei
. Menschen, die Screenreader oder andere Assistensysteme nutzen, haben diese Möglichkeit nicht, denn der Fokus der assistiven Technologie kann sich immer nur auf einem Element befinden.
Hier kommen die ARIA Live Regionen ins Spiel. Sie informieren den Screenreader darüber, dass sich der Inhalt des Elementes ändern wird und diese Änderung bitte zeitnah vorgelesen werden soll. Der Screenreader informiert dann die Nutzer aktiv über Änderungen, sodass alle blitzschnell und barrierefrei auf dem neuesten Stand sind.
Auszeichnung von Live Regionen in HTML und ARIA
ARIA Live Regionen sind nicht alle gleich – es gibt unterschiedliche Typen, die je nach Anwendungsfall eingesetzt werden können. Schauen wir uns an, welche Möglichkeiten es gibt.
Das Attribut aria-live
Live-Regionen lassen sich am direktesten mit dem Attribut aria-live auszeichnen. Dieses Attribut wird einfach dem Element gegeben, dessen Inhalt sich verändern wird. Wählen Sie den Container dabei nicht zu großzügig, beschränken Sie sich auf das Element, dass den veränderten Text enthalten wird, da sonst womöglich zu viel vorgelesen wird.
Das Attribut kann dabei 3 verschiedene Werte annehmen:
- polite: Der Nutzer wird über die Änderung informiert, sobald es passt. Aktuell vom Nutzer ausgewählte Inhalte werden erst fertig vorgelesen.
- assertive: Die Änderung ist besonders dringend. Die aktuelle Ausgabe wird unterbrochen um die Änderung vorzulesen.
- off: Änderungen müssen nicht vorgelesen werden. Das ist nützlich wenn man Elemente nutzt, deren Rollen standardmäßig Live-Regionen erzeugen.
ARIA-Attribute für die Feinabstimmung
Möchte man das Verhalten des Screenreaders noch genauer beeinflussen, dann gibt es noch einige weitere Attribute, die man nutzen kann.
aria-atomic – wieviel wird vorgelesen?
Mit aria-atomic lässt sich steuern, wieviel Text bei einer Änderung vorgelesen werden soll. Nehmen wir als Beispiel den Warenkorb eines Onlineshops. Bei der Angabe aria-atomic="true" würde der Screenreader den vollständigen Inhalt des Elements vorlesen, also beispielsweise „Im Warenkorb befinden sich 2 Artikel.“. Bei der Angabe aria-atomic="false" wird nur der Teil vorgelesen, der sich verändert hat. In diesem Fall also nur „2“. Je nach Einsatz kann aber auch diese Variante die bessere sein. Bei einem Chat beispielsweise ist nur die neu hinzugefügte Nachricht von Bedeutung.
aria-relevant – was ist wichtig?
Nicht immer möchte man wirklich auf jede Änderung reagieren. Mit aria-relevant kann man festlegen, welche Art von Änderung ausgegeben werden soll. Gültige Werte sind:
additions: Ausgegeben werden nur DOM-Elemente, die neu hinzugefügt werden.removals: Ausgegeben werden nur DOM-Elemente und Texte, die entfernt wurden.text: Ausgegeben werden hinzugefügte Texte.all: Alle Änderungen werden ausgegeben.
Auch Kombinationen dieser Werte sind möglich. Ist kein Wert explizit angegeben, so gilt als Standard beispielsweise „additions text“, womit alle neuen, nicht aber die entfernten Texte vorgelesen werden.
aria-busy – warte ab, bis ich fertig bin
Nicht immer möchte man jede Änderung sofort dem Nutzer mitteilen. Werden Inhalte nach und nach hinzugefügt, dann ist es hilfreich zu warten, bis die Arbeit beendet wurde. Hier kommt aria-busy zum Einsatz. aria-busy="true" signalisiert dem Screenreader, dass die Änderungen noch nicht abgeschlossen sind. Ist die Anpassung abgeschlossen, so setzt man aria-busy="false" und der Screenreader wird mit der Ausgabe der neuen Inhalte beginnen.
Die Abkürzung mit ARIA Rollen
Es existieren einige Rollen für bestimmte Live Regionen, die die oben genannten Attribute passend setzen und so die Arbeit erleichtern können, wenn man sie richtig einsetzt.
role=“status“
Diese Rolle wird für Elemente verwendet, die einen Status oder eine Benachrichtigung anzeigen. So kann beispielsweise die Nachricht über ein erfolgreich abgesendetes Formular mit dieser Rolle beschrieben werden. Implizit werden mit der Rolle aria-live="polite" und aria-atomic="true" gesetzt.
role=“alert“
Ein Alert ist eine Statusmeldung, die der Nutzer unbedingt erfahren muss. Warnmeldungen oder Fehler, die sehr wichtig sind. Dementsprechend bringt die Rolle die Eigenschaften aria-live="assertive" und aria-atomic="true" mit.
role=“log“
Das Log als Rolle wird immer dann verwendet, wenn sich Inhalte fortlaufend ändern und deren Reihenfolge wichtig ist, ein Chat beispielsweise. Dementsprechend ist sie mit aria-live="polite" und aria-atomic="false" verbunden und liest so nur die neusten Änderungen vor.
role=“timer“ und role=“marquee“ – wann Änderungen nicht vorgelesen werden sollten
Ein Timer zeigt die bereits vergangene Zeit seit oder die verbleibende Zeit bis zu einem Zeitpunkt an und passt sich entsprechend oft an. Ein Marquee-Element ist ein Element, das viel Text ohne spezielle Ordnung in eine beliebige Richtung nach und nach durchscrollt. Man denke beispielsweise an einen Newsticker, der die wichtigsten News des Tages anzeigt.
Beide Elemente ändern sich üblicherweise sehr oft. Diese Änderungen vorzulesen würde eine sinnvolle Nutzung des Screenreaders nahezu unmöglich machen. Deshalb ist für sie standardmäßig aria-live="off" gesetzt womit keine Änderungen vorgelesen werden.
Fazit – ARIA Live Region optimal nutzen
Damit die Nutzung von ARIA Live Regionen reibungslos funktioniert, sollten sie mit Bedacht eingesetzt werden. Ein häufiger Fehler ist die Überflutung mit Informationen – zu viele Updates können nervig und verwirrend sein. Überlegen Sie sich deshalb genau, welche Informationen der Nutzer wirklich sofort braucht.
Bedenken Sie außerdem, dass Screenreader für Live Regionen ausnahmsweise wirklich nur den Text, nicht aber Kontextinformationen vorlesen. Auch Links in den veränderten Daten sind nicht unmittelbar ausführbar, denn der Fokus liegt ja eigentlich woanders auf der Seite.
Man sieht: ARIA Live Regionen sind ein mächtiges Werkzeug, um Webseiten inklusiver und barrierefreier zu gestalten. Richtig genutzt sorgen sie dafür, dass Echtzeit-Updates für alle zugänglich und verständlich werden.