Repository navigation
Popover API: announce toast notifications to screen readers - #403
Conversation
Add a persistent, visually hidden <output> element to the toast popovers example. Each time a toast is shown, its message is copied into the <output>, which is a live region, so screen readers announce it. The text is cleared and then set after a short delay so that the same message twice in a row is still announced. The toasts themselves stay outside the <output>: when several toasts were placed inside it, Chrome re-announced every visible toast on each change, including removals, even with aria-atomic="false". Based on the status message example in the HTML specification. Update the README accessibility note to describe the new behavior. Refs mdn/content#35811
3c91214 to
b37d64b
Compare
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
@IvanGiovany good work; I've tested it, and it fixes the problem. I also checked the MDN content repo, and it doesn't mention it specifically, so no synchronization changes are needed.
I just had a couple of minor comments.
| } | ||
|
|
||
| function announce(msg) { | ||
| // The <output> element is a live region, so screen readers announce changes |
There was a problem hiding this comment.
Update the comment to mention that it is implicitly a live region due to it having an implicit ARIA status role.
| @@ -18,6 +18,7 @@ These examples show how the Popover API behaves; they are not complete accessibl | |||
There was a problem hiding this comment.
Update this line? The toast example is now accessible. Maybe something like:
Some of these examples are not fully accessible; they were written to show how the Popover API behaves. The following notes comment on their accessibility status.
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
All looking good. Thanks for the improvement, @IvanGiovany!
Fixes the toast example part of mdn/content#35811.
The toast popover demo didn’t announce notifications to screen readers. This adds a persistent, visually hidden output>live region, based on the status-message popover example in the HTML spec. Each time a toast is shown, its message is copied into the , so it’s announced.
The visible toasts are unchanged and stay outside the live region. An earlier attempt placed the toasts inside the output, but Chrome re-read every visible toast on each change (even with aria-atomic="false"), so the live region holds only the latest message instead.
Notes
The is cleared and then set after 100ms, so repeated identical messages are still announced.
It’s hidden with a visually-hidden pattern rather than display: none, so screen readers can still access it.
If toasts are triggered faster than the screen reader can speak, a newer message may interrupt an earlier one. This seems acceptable for toast notifications.
Testing (NVDA [version], Windows)
Original demo: toasts not announced
This change, Chrome [version]: each toast announced once, including repeated identical messages; nothing announced when toasts expire
This change, Firefox [version]: same as Chrome
The fixed version:
https://github.com/user-attachments/assets/35cff46c-f4dd-4d69-899d-feeb7299dc59