Snackbars

From Level Access Web Labs
Jump to navigation Jump to search

Snackbars are a Material Design component used by apps currently in Play store. They are known to have accessibility issues and a few developers have complained that Google let this component exist even though there are issues.

Specifically, snackbars by definition appear temporarily and disappear on their own without requiring user input to be dismissed.

As long as the Snackbar notifications are used to provide information that is already available on the page (in case the screen reader missed it), it should be fine to use it. Level Access has provided some considerations to keep in mind while using Snackbars – 1. The pop-up of snacks may be an issue under SC 2.2.2 if there is no way to turn them off they could be distracting for users with learning and cognitive disabilities. 2. If the snacks are up for a short period of time people might not be able to read them under 2.2.1. 3. If they limit the snack to information that is already communicated other ways this would help mitigate issues for users with low vision and screen readers. 4. Generally you would not want focus to move to the snack. a. It could be useful to have a way to focus the snack – but this would generally be keyboard shortcut and likely wouldn’t be available to most users on mobile. 5. Settings to control the duration and appearance of the snacks (personalization) would be best.

Scott - Every toast notification I’ve worked with has been some variation of a live region or “status” role, and even that goes south really fast if they’re aggressive (as toasts often are). There’s a philosophical design flaw in the idea of wanting to put controls into an autonomously triggered section, and you’re going to run into issues with timed responses being a problem if they’re not careful with it. That said, they might be able to get away with the design if they are very compact with the content of live announcements and place the toaster in a fixed location. The target result would be more akin to “you have pending notifications” on a phone, where there’s a minimalist cue and the User knows where they need to go to find what the page wants.