Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Alive and Kicking veröffentlicht in 2014

ARIA-Attribute für Live-Regionen

Live-Regionen sind Bereiche einer Webseite, die entweder durch eine Nutzeraktion oder automatisch aktualisiert werden, ohne dass die Webseite neu geladen wird. Live-Regionen haben auch die Eigenschaft, dass die aktualisierten Elemente nicht den Fokus haben müssen, d.h. die Aktualisierungen können an beliebiger Stelle der Seite stattfinden während der Nutzer an einer anderen Stelle beispielsweise ein Formular bearbeitet.

Das Thema ist deswegen im barrierefreien Webdesign wichtig, weil sich Screenreader auf bestimmte Attribute im Code verlassen müssen, um sie als Live-Regionen zu identifizieren und um den Umfang der Mitteilung über die Aktualisierung festzulegen. Ohne die Attribute erfährt der Screenreadernutzer nicht, dass sich was auf der Seite geändert hat.

Das aria-live-Attribut

Live-Regionen werden mit dem aria-live-Attribut gekennzeichnet. Das Attribut kann auf jedes Element angewandt werden, z.B. auf einem DIV-Element:

<div aria-live="polite">
  <p> ... Bereich, der aktualisiert werden kann ...</p>
</div>

Das aria-live-Attribut gibt an, dass das Element aktualisiert werden kann. Es gibt drei Werte für das Attribut, die die Dringlichkeit der Aktualisierung festlegen:

Off
Aktualisierungen werden nicht an den Screenreader weitergegeben (Standardwert), außer der Fokus befindet sich gerade auf den aktualisierten Inhalt. Dieser Wert sollte für Live-Regionen genutzt werden, die sich häufig aktualisieren (z.B. GPS-Daten eines sich bewegenden Objektes).
Polite
Aktualisierungen haben eine geringe Dringlichkeit und der Screenreadernutzer wird erst dann informiert, wenn er seine Aktivitäten (Lesen, Tippen usw.) unterbricht. Dieser Wert ist der übliche Wert.
Assertive
Aktualisierungen haben eine hohe Dringlichkeit und der Screenreadernutzer wird unmittelbar informiert und bei seiner Aktivität (Lesen, Tippen usw.) unterbrochen. Dieser Wert sollte nur bei wichtigen Aktualisierungen genutzt werden.

Vor allem wenn mehrere Live-Regionen auf Webseiten vorhanden sind, entscheidet das aria-live-Attribut über die Reihenfolge der Benachrichtigungen. Wenn im folgenden Beispiel beide Live-Regionen gleichzeitig aktualisiert werden, wird die Live-Region mit dem Wert assertive zuerst ausgegeben:

<input id="zwischensumme" aria-live="polite" type="text" />
...
<div id="gesamtsumme" aria-live="assertive">
  ...
</div>

Im Allgemeinen werden Live-Regionen mit einem Wert assertive vor Aktualisierungen mit dem Wert polite von einem Screenreader an den Nutzer weitergegeben, aber nach der Spezifikation können Aktualisierungen mit hoher Dringlichkeit alle wartenden Benachrichtigungen mit der geringeren Dringlichkeit auch löschen.

Hinweis: Die Dringlichkeit von Live-Regionen kann auch vom Screenreadernutzer ein- oder ausgeschaltet oder durch Skripte im Screenreader verändert werden.

Einstellungen im Screenreader JAWS für Live-Regionen

Folglich können Webentwickler sich nicht darauf verlassen, dass Aktualisierungen von Live-Regionen barrierefrei sind.

Das role-Attribut

Die ARIA-Spezifikation sieht auch einige Rollen vor, die bereits als Live-Regionen definiert sind:

Nur wenn keiner der vordefinierten Rollen semantisch korrekt angewandt werden kann, sollte eine Live-Region mit aria-live und weiteren Attributen für Live-Regionen ausgezeichnet werden. Das role-Attribut mit den angegebenen Werten setzt ein aria-live-Attribut und in manchen Fällen zusätzlich ein aria-atomic-Attribut.

Das wird derzeit allerdings noch nicht überall unterstützt. Einige Tests haben ergeben, dass das aria-live trotz einer Rolle noch vergeben werden muss:

Screenreader/aria-live IE11 Chrome 38 Firefox 33
JAWS 15/- Nein Nein Nein
JAWS 15/role="status" Nein Nein Ja
JAWS 15/aria-live="polite" Ja Ja Ja
NVDA 2014.3/- Nein Nein Nein
NVDA 2014.3/role="status" Nein Nein Ja
NVDA 2014.3/aria-live="polite" Ja Nein Ja