2

enter image description here 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?

2 Answers 2

2

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-live region. By default, the polite setting is used.

0

There are accessibility options for the snacker, as detailed in this forums post here:

https://github.com/material-components/material-components/issues/60

1
  • Thanks for sending the link Darryl. My understanding from reading this is that for it to be accessible the snackbar duration needs to be set to 99999/infinite and an explicit dismiss button should be added so it can be manually dismissed by the user. Is that your understanding too?
    – David
    Aug 12, 2019 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.