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
Marketing preferences

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

Timing

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.

Practical example

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

Code example

<div id="toast">
  <span id="toast-message" role="status">
    <!-- Inject snackbar message here -->
  </span>
  <button type="button">
    Dismiss
  </button>
</div>