Avoid using toast snackbars
It’s exceedingly rare this is a good design choice. A more semantic or visually inline HTML element should probably be used instead.
Snackbars are a custom HTML construct and have no semantic meaning. As such, like tooltips, it is difficult to define precise acceptance criteria.
Never use 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?)
- On page load messaging
- Performing unexpected actions or alerts on page load is confusing to people using a screenreader
Only use toast to reinforce updates
If using a snackbar is unavoidable, it should only be used for non-critical messaging.
The status injected should 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
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).
- Inner text describes snackbar when it appears on screen
role="status"for snackbars injected into the page
- Focus should not move to the element automatically when the snackbar appears