Wie gut ist der Browser-Support für die ARIA Notify API?

Erstellt am

Die neue ARIA Notify API wird von immer mehr Browsern unterstützt. Daher dachte ich mir: Es ist an der Zeit, einen gründlichen Test mit verschiedenen Screenreadern, Plattformen und Browsern durchzuführen.

Falls ihr die API noch nicht kennt: Mit der ariaNotify() Methode könnt ihr Text in eine Warteschlange einreihen, damit er von Screenreadern vorgelesen wird. Beispiel: Wenn Nutzer:innen in einem Online-Shop auf die Schaltfläche „Zum Warenkorb hinzufügen“ klicken, sollte der Screenreader eine Meldung wie „Artikel XY wurde dem Warenkorb hinzugefügt“ vorlesen.

Werft einen Blick in meinen Artikel „Bringe Screen Reader mit der ARIA Notify API zum Sprechen“ für mehr Details.

Ein Mann spricht in ein Megaphon.

Ich werde kurz den Testaufbau erläutern und anschließend die Ergebnisse meiner Screenreader-Tests vorstellen.

Mein Test-Setup

Ich habe meine CodePen-Demo eines Online-Shops namens „The Shop“ für die Tests wiederverwendet. 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.“

Screenreader Testergebnisse

Während ich diesen Blogbeitrag schreibe, wird die ARIA Notify API bereits von allen gängigen Browsern auf Windows- und Android-Geräten unterstützt. Ich habe meine Demo erfolgreich mit den aktuellen Versionen von NVDA und TalkBack getestet.

Hier ist eine detaillierte Liste von Testszenarien, in denen die ARIA Notify API wie erwartet funktioniert hat:

Nun die schlechte Nachricht: Safari und iOS haben kläglich versagt. In den folgenden Testszenarien wurde die Meldung „Artikel XY wurde dem Warenkorb hinzugefügt“ vom Screenreader nicht vorgelesen:

Fazit

Die gängigen Browser unter Windows und Android unterstützen die ARIA Notify API bereits. Das WebKit-Team (Safari) hat zwar seine Unterstützung für den Standard bekundet, diese API jedoch noch nicht in Safari implementiert. Ich konnte auch keine offenen Bug-Tickets oder andere Informationen zum Fortschritt finden.

Das bedeutet: Es ist noch zu früh, die neue Methode ariaNotify() im Produktionscode einzusetzen. Ihr könnt aber mit der API experimentieren und euch darauf vorbereiten, sie zu verwenden, sobald der Cross-Browser-Support gegeben ist.

Erstellt am