Don’t use toast snackbars
It’s exceedingly rare this is a good design choice.
- Snackbars are a custom HTML construct and have no semantic meaning.
- They add auditory noise to the screen reader experience and are difficult to browse if the message was missed.
- As such, like tooltips, it is difficult to define precise acceptance criteria.
Instead use an inline element to indicate a change
- Inject a success message in proximity to the updated control
- Place undo/edit buttons in easy to find locations for keyboard users
- Utilize a confirmation screen on exit
Never use toast snackbars for:
- Critical or irrevocable functionality like:
- Time sensitive actions (ex: Unsend this message)
- Confirmation of choices (ex: Are you sure you want to send payment?)
- Blocking error messages
- On page load messaging/alerts
- Performing unexpected actions or alerts on page load is confusing to people using a screenreader
- It is preferable to not let a toast snackbar time out.
- If the snackbar must dismiss automatically, it is preferred that timing be adjustable (WCAG 2.2.1).
Only use toast snackbars to reinforce updates
- If using a snackbar is unavoidable, it must only be used for non-critical messaging.
- The status injected must also be discernable on the page without the snackbar.
Given that I am on a dynamic single page app
- WHEN the customer changes the state of a toggle to OFF or ON
- THEN the toast appears to reinforce that the change has been saved
- AND the customer can confirm this is true from the toggle itself