ARIA-Live

Manchmal ist es gut, den Benutzer auf etwas aufmerksam zu machen, ohne dass sich viel ändert. Beispiele sind Nachrichten, die am oberen oder unteren Bildschirmrand auftauchen. Toast-Nachrichten können Fehlermeldungen oder Warnungen sein. Zum Beispiel, wenn die Webseite keinen Kontakt zum Server bekommt oder wenn man etwas bestätigen muss. Zum Beispiel, wenn gesagt wird, dass die Einstellungen eines Benutzers gespeichert wurden.

Es wäre nicht gut, wenn die Benutzer ihren Platz auf der Seite verlieren, nur weil sie auf eine solche Nachricht schauen müssen. Diese Ereignisse eignen sich gut für “aria-live”-Ankündigungen.

Die Funktion ist einfach: Aria-live ist ein leerer Container, der als solcher markiert ist. Dann wird Text eingefügt. Screenreader merken, wenn sich etwas in einer aria-live-Region ändert und sagen dann den Text dazu. Es gibt zwei Arten von aria-live: “assertive” und “polite”.

Screenreader sollten alle Ansagen mit aria-live sofort anzeigen. Sie unterbrechen alle anderen Ansagen, die der Screenreader gerade gesagt hat. Wenn eine aria-live-Ansage zurückhaltend ist, sollte sie erst nach einer kurzen Pause ansagen. Die letzte Ankündigung wird aufgeschoben und erst später gegeben.

role=“alert”

role=“alert” ist eine besondere Art von “aria-live”-Region. Sie müssen nicht “aria-live” hinzufügen, da “role=alert” es bereits als aktive Region interpretiert.

Best Practices für “aria-live”.

Hier sind ein paar Tipps, wie du aria-live einheitlich nutzen kannst.

• Die “aria-live”-Region muss leer sein. Es handelt sich um einen Container, der auf JavaScript wartet. Wenn eine Seite geladen wird, deren aria-live-Bereich bereits Text enthält, funktioniert sie nicht wie aria-live. Es ist ganz normaler Text.

• Fügen Sie Text nicht sofort nach der Erstellung in den Bereich ein. Stellen Sie sicher, dass der Bereich im DOM und im Zugänglichkeitsbaum festgelegt wurde und dass Screenreader Zeit hatten, ihn zu analysieren. Was heißt das? Assistive Technologien brauchen einen Moment, um zu erkennen, dass eine aria-live Region da ist. Erst dann können sie Text anzeigen, der in diese Region eingefügt wird. Eine sichere Technik ist, dass beim Laden der Seite ein leerer aria-live-Bereich vorhanden ist. Sie können auch nach dem Laden der Seite einen neuen aria-live-Knoten hinzufügen. Fügen Sie dazu aber eine JavaScript-Verzögerung von etwa einer halben oder einer ganzen Sekunde hinzu.

  • Wenn man auf die erste Schaltfläche klickt, erscheint ein neuer Knoten im DOM. Ihm wurde bereits Text hinzugefügt. Die meisten Screenreader werden nichts sagen, weil sich nichts geändert hat. Wenn Sie auf die zweite Schaltfläche klicken, wird Text in einen bereits vorhandenen aria-live-Bereich eingefügt. Bildschirmlesegeräte können das gut anzeigen. Wenn Sie auf die dritte Schaltfläche klicken, wird erst Text in den aria-live-Knoten eingefügt und dann eine Sekunde gewartet. So wissen Screenreader, dass sich etwas geändert hat.

• Achten Sie nicht zu sehr auf die aria-live-Region. Wenn Sie den Fokus verschieben, ist das ein Fehler. Manchmal ist es gut, den Fokus auf neuen Text zu verschieben. Dann wird der Text schon von der Sprachausgabe angekündigt. Eine zusätzliche Ankündigung mit aria-live ist dann nicht nötig. Sie können den Fokus entweder dort lassen und aria-live nutzen, oder ihn verschieben und nicht nutzen. Aber machen Sie nicht beides.

• Halten Sie den Text kurz, der mit “aria-live” beginnt. “aria-live”-Regionen sind nur kurz zu sehen. Sie sind wie Sternschnuppen. Sie werden angekündigt und dann sind sie vorbei. Das Schlimmste ist, dass sie unterbrochen werden können. Wenn der Benutzer beispielsweise eine Taste auf der Tastatur drückt und die Nachricht nicht mehr angezeigt wird, ist sie trotzdem noch auf dem Bildschirm. Manchmal ist sie aber schwer zu finden. Oder der Benutzer bewegt sich im Dokument und findet den Text, aber dann macht er im Kontext keinen Sinn. Eine kurze Nachricht wird eher gehört als eine lange. Ist die Nachricht zu lang, wird sie unterbrochen und der Rest geht verloren.

• Verwenden Sie gegebenenfalls zusätzliche aria-live-Funktionen. Für die meisten Dinge reicht die Verwendung von “assertive” oder “polite”. Sie können spezielle aria-live-Bereiche für Status, Warnungen, Protokoll und Marquee erstellen. Sie können wählen, ob Sie nur Elemente ankündigen möchten, die einer aria-live-Region hinzugefügt werden, oder nur Elemente, wenn sie entfernt werden. Es gibt noch ein paar weitere Eigenschaften, wenn Sie anspruchsvollere Implementierungen von aria-live benötigen.

• Testen Sie mit Sprachausgabe. Testen Sie Ihre Software in verschiedenen Browsern, auf verschiedenen Geräten und Plattformen.