Navigation



Barrierefreies AJAX

Um das lästige Nachladen der ganzen Seite zu vermeiden, versucht man bei AJAX, durch asynchrone Callbacks zum Server, teile der Webseite dynamisch nachzuladen oder zu aktualisieren.

Dies bringt jedoch einige Probleme mit sich. Beispielsweise merkt ein Screenreader nichts von Änderungen an bereits gelesenen Inhalten. Eine blinde Person wird somit nicht darüber informiert, wenn sich auf der Webseite etwas geändert hat.

Live-Regionen

Zur Lösung dieses Problems erweitert die WAI-ARIA die HTML-Syntax um sogenannte Live-Regionen. Dabei kann auf jedem HTML-Element das aria-live-Attribut gesetzt werden, welches den assistiven Technologien mitteilt, dass diese Region sich ändern kann.

Das aria-live-Attribut kann auf folgende Werte gesetzt werden:

  • off ist der Standard und sagt aus, dass kein dynamisches Nachladen erfolgt
  • polite informiert den Benutzer dann, wenn der Screenreader im Idle-Mode ist. Eine laufende Sprachausgabe wird nicht unterbrochen
  • assertive bedeutet, dass der Benutzer unmittelbar informiert werden muss. Eine laufende Sprachausgabe wird unterbrochen
<div id="news"
     aria-life="polite"
     aria-atomic="true"
     aria-relevant="additions">Zur Zeit keine News.</div>

aria-atomic

Durch das aria-amotic-Attribut kann festgelegt werden, ob bei einer Änderung der ganze Inhalt, oder nur die Änderung vorgelesen werden soll.

  • true bedeutet: bei einer Änderung alles nochmals vorlesen
  • false bedeutet: nur den geänderten Text nochmals vorlesen

aria-busy

Durch das aria-busy-Attribut kann das Mitteilen der Änderung verzögert werden, wenn beispielsweise noch weitere Änderungen anstehen.

  • true bedeutet: Mitteilung verzögern
  • false bedeutet: Änderung kann jetzt mitgeteilt werden

aria-relevant

Durch das aria-relevant-Attribut kann festgelegt werden, welche Art von Änderungen für den Benutzer interessant sind:

  • all: alle Änderungen sind relevant
  • additions: nur hinzugefügte Elemente sind relevant
  • removals: nur entfernte Elemente sind relevant
  • text: bei Änderung des Textinhaltes