Informationen
Schatten eines Fotografen über einem Stein mit einer Eidechse

Live Regionen (Dynamische Seiteninhalte)
[Materialsammlung]

Live-Regionen sind Inhalte, die dynamisch Inhalte von Webseiten aktualisieren oder ergänzen. Die Herausforderung besteht darin, diese Inhalte für Screen Reader zum passenden Zeitpunkt in angemessener Weise darzustellen.

Live-Regionen müssen natürlich textbasiert sein, also aus Text bestehen oder über eine Textalternative verfügen. Screen Reader Können nur textbasierte Informationen präsentieren.

Live-Regionen dürfen keine interaktiven Elemente wie Links enthalten, da Screen Reader deren Inhalt über aria-live zwar wiedergeben, den Fokus jedoch nicht in den Bereich setzen.

Bedeutung von Live Regionen bzw. dynamischen Inhalten

Die Natur gibt es uns vor: Wie bei der schwer erkennbaren Eidechse auf dem Bild erwarten wir auch auf dynamischen Webseiten überraschende Bewegungen. Solche Änderungen auf Webseiten sind visuell mehr oder weniger rasch erkennbar. Was jedoch, wenn Änderungen nicht visuell wahrgenommen werden können?

Auf einer statischen Webseite werden vom Screen Reader die Elemente linear wiedergegeben, wenn sich der Fokus darauf befindet. Dynamisch sich ändernde Inhalte müssen für Screen Reader darüber hinaus technisch explizit wahrnehmbar gemacht werden. Dafür stehen eigene ARIA Attribute zur Verfügung.

LIVE - Hinweisen auf Live Regionen (Property)

Bedeutung von aria-live

Mit dem Attribut aria-live kann für den Screen Reader wahrnehmbar gemacht werden, dass sich Inhalte außerhalb des Fokus geändert haben. Gleichzeitig kann dargestellt werden, wie bedeutsam es ist, dass die neuen Inhalte für den Screen Reader präsentiert werden.

Das Attribut kann auf jedes Element gesetzt werden, üblicherweise auf einen Seitenabschnitt. Es muss natürlich im Ausgangselement gesetzt werden, das den Live-Bereich umschließt.

Werte für aria-live
Wert Auswirkung Anwendungsbeispiele
polite Der Screen Reader wird höflicherweise nicht in der laufenden Inhaltsdarstellung unterbrochen, informiert jedoch bei nächster Gelegenheit, wenn die gewöhnliche Darstellung abgeschlossen ist. Die aktuellen Hochrechnungsergebnisse zu einer Wahl auf einer Nachrichtenseite mit mehreren neuesten Nachrichten.
assertive Es handelt sich um einen Inhalt von höchster Dringlichkeit, der vom Screen Reader unverzüglich wiedergegeben werden soll. Die aktuellen Hochrechnungsergebnisse zu einer Wahl auf einer Nachrichtenseite kurz nach Schließung der Wahllokale.
off (Standardwert) Der Screen Reader ignoriert die Aktualisierungen als solche und präsentiert sie lediglich als gewöhnliche Inhalte, wenn sich der (virtuelle) Fokus darauf befindet. Counter, die live die aktualisierten Stimmergebnisse aus Wahlbezirken für die wahlwerbenden Gruppen darstellen.

Die Festlegung der Dringlichkeit wirkt sich auch auf die Reihenfolge der Darstellung durch den Screen Reader aus. Allerdings kann diese im Screen Reader teilweise konfiguriert werden. Derart verursachte Darstellungsänderungen liegen jedoch nicht in der Verantwortung des Barrierefreien Web Designs.

ARIA Attribute zum Feinschliff von Live Regionen

aria-atomic - Festlegung der Ausgabedetails

Mit dem Attribut aria-atomic kann festgelegt werden, ob der Screen Reader eine Live Region bei Änderungen als Ganzes präsentiert oder nur die geänderten Inhalte. Das Attribut muss im Ausgangselement gesetzt werden.

Folgende Werte sind zulässig:

false (Standardwert)
Es werden nur die Änderungen vorgelesen.
true
Der gesamte referenzierte Bereich wird wiedergeben.

ARIA States and Properties (Spezifikation auf w3.org)

aria-busy - Benachrichtigungen nach Abschluss des Prozesses

Mit dem Attribut aria-busy kann an den Screen Reader vermittelt werden, dass ein Prozess noch nicht abgeschlossen ist. Screen Reader dürfen dann den Abschluss des Prozesses abwarten, bevor sie Aktualisierungen wiedergeben.

Folgende Werte stehen zur Verfügung:

false (Standardwert)
Es gibt keine Prozesse, die abgewartet werden sollen, bevor der Screen Reader Änderungen Wiedergibt.
true
Die Wiedergabe von Aktualisierungen darf möglicherweise vom Screen Reader erst wiedergegeben werden, wenn Prozesse abgeschlossen sind.

ARIA States and Properties (Spezifikation auf w3.org)

CONTROLS - Technischer Verweis auf die Live Region

Mit dem Attribut aria-controls kann mit Funktionalitäten von Screen Readern von einem Schalter oder Link der Inhalt einer Live Region explizit wiedergegeben werden. Das Attribut muss dabei im Steuerelement gesetzt sein.

aria-controls (Infos auf Zweiter Blick)

RELEVANT - Filter auf mitzuteilende Aktualisierungen

Bedeutung von aria-relevant Filtern

Mit dem Attribut aria-relevant können Filter auf die Darbietung der dynamisch geänderten Inhalte und deren Weitergabe angewendet werden. Deren Einsatz sollte im Hinblick auf die Useability gut reflektiert werden. Auch gibt es bei der Umsetzung durch Browser und Assistierende Technologien noch Probleme.

Anmerkung: Die Attribute zum Feinschliff müssen nur eingesetzt werden, wenn deren jeweilige Standardwerte explizit überschrieben werden sollen.

Werte für aria-relevant
Wert Auswirkung
additions Element-Knoten innerhalb der Live Region werden weitergeleitet.
removals Die Entfernung textueller Inhalte wird weitergeleitet.
text Textuelle Inhalte und auch Alternativtexte für Bilder aus der Live Region werden weitergeleitet.
additions text
(Standardwert)		 Kombination der Werte additions und text.
all Alle Änderungen werden weitergeleitet, also Ergänzungen, Entfernungen ...

Änderungen, die in einer Live Region auf Außenbereiche nur referenziert werden, etwa mittels aria-labelledby, werden nicht aktualisiert.

Einsatzbeispiele für aria-relevant Filter

  • Wenn sich in einer Live Region Texte ändern, wird bei der Standardeinstellung additions text nur der neue Text und nicht der gelöschte wiedergegeben.
  • Wenn sich jemand aus einem Live Diskussionsforum (Chat Room) abmeldet, ist die Entfernung der abgemeldeten Person aus der Liste der teilnehmenden ein relevantes Ereignis, das mittels aria-relevant="all" weitergegeben werden sollte.
  • Wenn eine dynamische Bilderpräsentation als Live Region gekennzeichnet ist, sollten die Alternativtexte beim Einsatz der Attribute additions / text / all vom Screen Reader aktualisiert werden.

extern ARIA States and Properties (Spezifikation auf w3.org)