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:

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:

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.

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:

• role="alert" für eingeblendete (und nicht fokussierte) Inhalte, die nur für eine bestimmte Zeit angezeigt werden und wichtige Informationen für den Nutzer enthalten (z.B. eine wichtige Benachrichtigung, dass eine Session gleich abläuft).
• role="log" Für protokollartige Inhalte, d.h. Inhalte die nach und nach eingeblendet werden während ältere Inhalte ausgeblendet werden (z.B. ein Chat)
• role="marquee" für durchlaufende, für den Nutzer nicht essentielle Inhalte (z.B. scrollender Text in einem Ticker)
• role="progressbar" für Bereiche mit wechselnden Inhalten, die den Status einer länger andauernden Aufgabe anzeigen (z.B. eine Fortschrittsanzeige)
• role="status" für Bereiche mit wechselnden Inhalten, die durch die Ergebnisse von Nutzeraktionen aktualisiert werden (z.B. eine Statuszeile oder die Ergebnisse einer Berechnung)
• role="timer" für Bereiche mit wechselnden Inhalten, die die verstrichene oder verbleibende Zeit darstellen (z.B. die verbleibende Zeit in einer Auktion)

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: