Zweiter Blick: Live Regionen / Dynamische Inhalte

BarrierefreiheitDarstellungsoptionen



Live Regionen (Dynamische Seiteninhalte)

Eidechse

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 Webdesigns.

ARIA Attribute zum Feinschliff von Live Regionen

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 natürlich im Ausgangselement gesetzt werden.

Werte für aria-atomic
Wert Auswirkung
false (Standardwert) Es werden nur die Änderungen vorgelesen.
true Der gesamte referenzierte Bereich wird wiedergeben.

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.

Werte für aria-busy
Wert Auswirkung
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.

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.

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 Usability 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.