Make Screen Readers talk with the ARIA Notify API
A user presses the search button and the page content is updated to include the results of the search. Or you click the “Add to Shopping Cart” button and the shopping cart icon in the header receives a visual badge to indicate the added item. Typical workflows in modern websites.
A sighted person can simply perceive the visual change of the page content. But what about blind and visually impaired users? How can they perceive important changes that are not given focus? At the moment, web developers have to use ARIA live regions to create status messages that are announced by screen readers.
Photo: © Edmond Dantès / pexels.com
Unfortunately, ARIA live regions are tightly coupled with DOM elements that need to be updated. But in some cases it would be more straightforward to simply let the screen reader announce a specific text. This is the idea behind the new ARIA Notify API.
Microsoft Edge has recently implemented the new API as a developer and origin trial. So, I went ahead and created a demo project to test the new functionality. Here's what I think.
How does ARIA Notify work?
ARIA Notify is an imperative notification API designed to replace the usage of ARIA live regions in situations where a visual live region isn't necessary. The API provides an ergonomic way to tell assistive technologies, such as screen readers, exactly what to announce to users and when.
Developers can call the ariaNotify() method with the text to be announced to
the user. Here's an example:
document.ariaNotify("This is an audible notification");
Optionally, you can set the priority option to indicate how the screen reader
should rank the notification with respect to other, pending, notifications:
document.ariaNotify("Critical error", { priority: "high" });
Want to give it a try?
Demo: Online Shop with Shopping Cart
I've created a CodePen demo of an online shop named “The Shop”. You can add products to the shopping cart like “Fancy Stuff” or “Useless Junk”. The shopping cart will visually indicate that products were added. Screen reader users will hear a message like, e.g., “Item Fancy Stuff was added to shopping cart.”
At the moment of writing this blog post, the ARIA Notify API is only supported as an origin trial in Microsoft Edge. You need to install Edge Canary and start the browser with the following command:
"C:\Users\[username]\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --enable-blink-features=AriaNotify
The --enable-blink-features=AriaNotify flag enables the ARIA Notify API. Now you should
hear your screen reader announce a message when you add a product to the shopping cart. I successfully tested
this with current versions of NVDA and JAWS.
First Impressions
- I like how straightforward and easy to use the new API is. You simply call
ariaNotify()and the screen reader announces the message. Awesome! 🤩 - The W3C will have to update their list of sufficient techniques in WCAG 4.1.3 Status Messages. 😅
- The
priorityoption didn't really make a difference in my test cases. I've created another demo with a toggle for using high or normal priority. But the screen reader announcements came at the same time. Maybe I misunderstood something. 😩 - Web developers will have to be very careful with the new API. When it's that easy to make a screen reader announce text, then there's a danger of flooding users with too many messages. I'm thinking about autoplay carousels that constantly announce status messages! 😨
Anyway. We're still in a very early, experimental phase. I'll wait for other browsers to also implement the new API and let it mature a bit. Then I'll test it on more devices, especially on mobile.
In general, I'm excited and optimistic about the ARIA Notify API.
Posted on