Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Alive and Kicking veröffentlicht in 2014

Fine-Tuning von ARIA-Live-Regionen

Insgesamt bietet die ARIA-Spezifikation vier spezielle Attribute für Live-Regionen. Neben dem aria-live-Attribut, das die Dringlichkeit (keine, geringe oder hohe Dringlichkeit) festlegt, können auch die folgenden Attribute eingesetzt werden:

Ein weiteres ARIA-Attribut ist vor allem dann für Live-Regionen sinnvoll, wenn die Live-Region das Ergebnis einer Nutzeraktion ist. In dem Fall "kontrolliert" eine Komponente die Live-Region und diese Beziehung kann mit aria-controls angegeben werden. Der Zweck dieses Attributs ist, dass Screenreadernutzer direkt vom Steuerelement zur Live-Region springen können, um eingefügte Inhalte beispielsweise ein zweites Mal zu lesen oder in die Zwischenablage zu kopieren.

Das aria-relevant-Attribut

Das aria-relevant-Attribut kann genutzt werden, um die mitzuteilenden Änderungen innerhalb einer Live-Region zu filtern. Nicht alle Aktualisierungen sind relevant für den Nutzer; meist sind nur hinzugefügte Inhalte interessant. Mit dem aria-relevant-Attribut können Live-Regionen so ausgezeichnet werden, dass nur bestimmte Veränderungen an Screenreader weitergegeben werden:

Der Standardwert ist aria-relevant="additions text". Die Werte removals und all sollten nur eingesetzt werden, wenn das Entfernen eines Textes wirklich wichtig für den Nutzer ist.

Das Attribut ist optional und muss nur eingesetzt werden, wenn der Standardwert überschrieben werden soll. Ein Beispiel für eine sinnvolle Änderung des Standardwerts ist die Liste von angemeldeten Nutzern in einem Forum. Mit dem folgenden Code:

<ul id="anmeldungen" aria-live="polite">
  <li id="nutzer1">Nutzername 1</li>
  <li id="nutzer2">Nutzername 2</li>
  <li id="nutzer3">Nutzername 3</li>
</ul>

wird eine Veränderung nur mitgeteilt, wenn ein neuer Nutzer sich neu anmeldet und zur Liste dynamisch hinzugefügt wird, nicht jedoch wenn ein Nutzer sich abmeldet und von der Liste entfernt wird. Die Live-Region kann in diesem Fall wie folgt angepasst werden:

<ul id="anmeldungen" aria-live="polite" aria-relevant="additions removals">
  <li id="nutzer1">Nutzername 1</li>
  <li id="nutzer2">Nutzername 2</li>
  <li id="nutzer3">Nutzername 3</li>
</ul>

In diesem Beispiel ist die An- oder Abmeldung eines Nutzers für andere Nutzer des Forums wichtig, aber sicher nicht so wichtig, dass die Arbeit unterbrochen werden muss; deshalb wurde die geringere Dringlichkeit angegeben. Bei diesem Beispiel wird außerdem angenommen, dass die Liste durch das Hinzufügen und Entfernen der Listenelemente im DOM erfolgt.

Das aria-atomic-Attribut

Je nach Aktualisierung kann es erforderlich sein, dem aktualisierten Inhalt einer Live-Region einen Kontext beizufügen. Während in einer Linkliste mit aktuellen Meldungen meist nur der hinzugefügte Inhalt, nicht aber die vollständige Linkliste an Screenreader weitergegeben werden muss, gibt es andere Situationen, in denen ein größerer Kontext notwendig ist. Das ist bei aktuellen Aktienkursen oder Sportergebnissen beispielsweise wichtig, dass neben den Zahlenwerten auch Bezeichnung des Wertpapiers oder die Namen der Sportmannschaften mit angegeben werden.

Das aria-atomic-Attribut kann hier helfen, den Kontext zu bestimmen. Für jede Live-Region kann mit dem Wert true angegeben werden, dass bei einer Aktualisierung die vollständige Live-Region an Screenreader mitgeteilt wird. Das Attribut kann nur zwei Werte annehmen und ist standardmäßig auf false gesetzt, d.h. die Mitteilung über Aktualisierung wird auf die Inhaltsformen beschränkt, die mit aria-relevant vorgegeben werden.

Wenn in einer Live-Region ein Fußballergebnis auf "7:1" aktualisiert wird, dann sollten die Mannschaften ebenfalls benannt sein:

<div id="ergebnisse" aria-live="polite">
  <ul>
    <li id="spiel1" aria-atomic="true">Mannschaft A - Mannschaft B <span>6:1</span></li>
    <li id="spiel2" aria-atomic="true">Mannschaft C - Mannschaft D <span>0:2</span></li>
  </ul>
</div>

In diesem Beispiel erben die Listenelemente das aria-live-Attribut mit dem Wert polite vom übergeordneten DIV-Element und werden bei einer Aktualisierung eines Ergebnisses in den SPAN-Elementen zusammen mit dem restlichen Text im Listenelement an den Screenreader weitergegeben.

Hinweis: Wenn ein Knoten geändert wird, suchen Hilfsmittel wie Screenreader nach dem ersten übergeordneten Element mit einem explizit gesetzten aria-atomic-Attribut. Nur wenn der Wert true ist, dann sollten sämtliche Inhalte mitgeteilt werden, die innerhalb des Elements mit dem aria-atomic-Attribut gekennzeichnet wurde. Ansonsten ist der Wert false und es wird nur die tatsächliche Aktualisierung (gemäß aria-relevant) mitgeteilt.

Das aria-atomic-Attribut ist optional. Der Wert sollte nur im Bedarfsfall vom Standardwert false auf true geändert werden, um überflüssige Wiederholungen zu vermeiden. Insbesondere wenn die Live-Regionen viele Inhalte aufweisen kann aria-atomic="true" es Nutzern erschweren, die tatsächliche Aktualisierung zu identifizieren.

Das aria-busy-Attribut

Wenn Aktualisierungen in einer Live-Region Verzögerungen aufweisen (z.B. durch unterschiedliche Ladevorgänge oder aufgrund von umfangreichen Berechnungen), dann ist es sinnvoll vor der dynamischen Aktualisierung das aria-busy-Attribut zu nutzen. Standardmäßig hat dieses Attribut den Wert false. Wenn der Wert auf true gesetzt wird, werden Mitteilungen über Aktualisierungen zurück gehalten und gesammelt, bis das Attribut wieder auf false gesetzt wird.

Bei umfangreichen Aktualisierungen kann es außerdem vorkommen, dass die Reihenfolge der Aktualisierungen nicht mit dem endgültigen Ergebnis übereinstimmt. Wenn

  1. aria-busy="true" für die Live-Region gesetzt wird,
  2. die Aktualisierungen in der Live-Region vorgenommen werden und dann
  3. aria-busy="false" für die Live-Region gesetzt wird

werden die Aktualisierungen in der Reihenfolge ausgegeben, wie sie im DOM am Ende der Berechnung erscheinen, und nicht in der Reihenfolge, wie sie am Bildschirm angezeigt werden.

Derzeit wird das aria-busy-Attribut nicht ausreichend unterstützt. Die Webentwicklung kann sich deshalb auf dieses Attribut noch nicht verlassen.

Das aria-controls-Attribut

Ein Attribut, das bei Live-Regionen sinnvoll sein kann, ist aria-controls. Wenn die Aktualisierungen einer Live-Region durch Nutzereingaben bewirkt werden, dann sollte das Steuerelement das Attribut erhalten:

<button aria-controls="ergebnis">Tue was</button>
<p>Irgendein Text</p>
<div id="ergebnis" aria-live="polite">
  <p>Hinzugefügter Text </p>
</div>

Mit aria-controls="[id]" erhält ein Screenreadernutzer die Möglichkeit, direkt zu einem "kontrollierten" Element zu springen. In diesem Fall wird ein Steuerelement genutzt, um irgendetwas zu tun und das Ergebnis wird in einer Live-Region angezeigt. Weil der Aktualisierung der Live-Region nur einmal vom Screenreader vorgelesen wird und der Nutzer diese Information möglicherweise nochmal lesen muss, ist der direkte Sprung zur Live-Region sinnvoll.

Allerdings ist die Unterstützung (auf Windows-Systemen) noch nicht verbreitet. In Firefox wird bei Fokus auf das Steuerelement im Screenreader JAWS 15 mitgeteilt, dass das kontrollierte Element mit einer bestimmten Tastenkombination angesprungen werden kann (JAWS+Alt+M). Wird die gleiche Tastenkombination in Chrome 38 gedrückt, teilt JAWS mit, dass der Sprung fehlgeschlagen sei - da scheint also eine Unterstützung in Planung zu sein. Im Internet Explorer 11 ist keine Unterstützung des Attributs erkennbar. Mit dem Screenreader NVDA kann derzeit nicht zu dem kontrollierten Element gesprungen werden.