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.

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

Timing

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).

Code example

<div class="snackbar" role="status">
  <strong>Let's at least try to avoid using these</strong>
  <button>Dismiss</button>
</div>

Developer notes

Name

  • Inner text describes snackbar when it appears on screen

Role

  • Use role="status" for snackbars injected into the page

Focus

  • Focus should not move to the element automatically when the snackbar appears