User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have an accessibility question about the snackbar pattern used in Material Design. Snackbars - Material Design
The behaviour of a snackbar is to appear for a temporary period of time then automatically dismiss itself.
To me it doesn’t appear to be accessible for a user who has screen reader turned on as the reader may miss reading out this message.
What are your thoughts?
UI elements that appear after the page is loaded can be annotated with aria-live so that screen readers will read the changes in the UI.
Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.
— Mozilla Developer Network, retrieved 2019-09-03
It is up to the implementation to ensure the Material Design guidelines are used in a way that is accessible for all users. For example, a Material Design framework for Angular specifically addresses accessibility for snackbars in their implementation. They mention:
Snack-bar messages are announced via an
aria-liveregion. By default, thepolitesetting is used.
There are accessibility options for the snacker, as detailed in this forums post here:
https://github.com/material-components/material-components/issues/60
