Bringe Screen Reader mit der ARIA Notify API zum Sprechen

Erstellt am

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.

Eine Frau spricht in ein Megaphon.

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:

document.ariaNotify("This is an audible notification");

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

document.ariaNotify("Critical error", { priority: "high" });

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:

"C:\Users\[username]\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --enable-blink-features=AriaNotify

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

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

In sozialen Netzwerken teilen

Startseite Nach oben