Bringe Screen Reader mit der ARIA Notify API zum Sprechen

Du drückst auf den Suchen-Button und der Seiteninhalt wird aktualisiert, um die Ergebnisse anzuzeigen. Oder du klickst auf die Schaltfläche „Zum Warenkorb hinzufügen“ und das Einkaufswagen-Symbol im Header erhält einen visuellen Indikator, dass ein Produkt hinzugefügt wurde. Typische Abläufe auf modernen Websites.

Eine sehende Person kann einfach die visuelle Veränderung des Seiteninhalts wahrnehmen. Aber was ist mit blinden und sehbehinderten Nutzer:innen? Wie können sie wichtige Änderungen bemerken, die nicht den Tastaturfokus erhalten? Aktuell müssen Webentwickler:innen ARIA-Live-Regionen verwenden, um Statusmeldungen zu erstellen, die von Screenreadern vorgelesen werden.

Foto: © Edmond Dantès / pexels.com

Leider sind ARIA-Live-Regionen eng an DOM-Elemente gekoppelt, die aktualisiert werden müssen. In manchen Fällen wäre es jedoch einfacher, den Screenreader einfach einen bestimmten Text vorlesen zu lassen. Das ist die Idee hinter der neuen ARIA Notify API.

Microsoft Edge hat vor kurzem die neue API als Ursprungstest implementiert. Also habe ich ein Demoprojekt erstellt, um die neue Funktionalität auszuprobieren. Das sind meine Eindrücke.

Wie funktioniert ARIA Notify?

ARIA Notify ist eine imperative Benachrichtigungs-API, welche die Nutzung von ARIA-Live-Regionen ersetzen soll, wenn eine visuelle Darstellung des Textes nicht notwendig ist. Die API bietet eine einfache Möglichkeit, assistiven Technologien wie Screenreadern genau mitzuteilen, was sie den Nutzer:innen wann vorlesen sollen.

Entwickler:innen können die ariaNotify()-Methode mit dem Text aufrufen, der vom Screenreader vorgelesen werden soll. Hier ist ein Beispiel:

Optional könnt ihr mit der Option priority angeben, wie der Screenreader die Benachrichtigung im Vergleich zu anderen, noch ausstehenden Benachrichtigungen einstufen soll:

Wollt ihr es ausprobieren?

Demo: Online-Shop mit Warenkorb

Ich habe eine CodePen-Demo eines Online-Shops namens „The Shop“ gebaut. Ihr könnt Produkte wie „Fancy Stuff“ oder „Useless Junk“ in den Einkaufswagen legen. Der Einkaufswagen zeigt visuell an, dass Produkte hinzugefügt wurden. Screenreader-Nutzer:innen hören eine Meldung wie z.B. „Artikel Fancy Stuff wurde dem Warenkorb hinzugefügt.“

Während ich diesen Blogbeitrag schreibe, wird die ARIA Notify-API nur als Testversion in Microsoft Edge unterstützt. Ihr müsst Edge Canary installieren und den Browser mit dem folgenden Befehl starten:

Das Flag --enable-blink-features=AriaNotify aktiviert die ARIA Notify API. Nun sollte euer Screenreader eine Meldung ausgeben, wenn ihr ein Produkt in den Einkaufswagen legt. Ich habe das erfolgreich mit den aktuellen Versionen von NVDA und JAWS getestet.

Erste Eindrücke

• Mir gefällt, wie direkt und einfach zu nutzen die neue API ist. Man ruft einfach ariaNotify() auf und der Screenreader liest die Nachricht vor. Großartig! 🤩
• Das W3C wird bald die Liste an ausreichenden Techniken auf WCAG 4.1.3 Status Messages aktualisieren müssen. 😅
• Die priority-Option hat in meinen Testfällen nicht wirklich einen Unterschied gemacht. Ich habe eine zweite Demo mit einem Toggle für hohe oder normale Priorität erstellt. Aber die Screenreader-Ankündigungen kamen zur gleichen Zeit. Vielleicht habe ich etwas missverstanden. 😩
• Webentwickler:innen müssen mit der neuen API sehr vorsichtig sein. Wenn es so einfach ist, einen Screenreader einfach Text vorlesen zu lassen, dann besteht die Gefahr, dass die Nutzer:innen mit zu vielen Meldungen überflutet werden. Ich denke da an Autoplay-Karussells, die ständig Statusmeldungen ausgeben! 😨

Wie auch immer. Wir befinden uns noch in einer sehr frühen, experimentellen Phase. Ich werde abwarten, bis auch andere Browser die neue API implementiert haben, und sie ein wenig reifen lassen. Dann werde ich es auf mehr Plattformen testen, insbesondere auf mobilen Geräten.

Generell bin ich begeistert und optimistisch, was die ARIA Notify API angeht.

Erstellt am 22.05.2025