Toast
Toast
Easy to use for everyone
Toasts can be difficult for people to notice due to their auto-dismiss behaviour meaning they can easily be missed.
Our guidance highlights the importance of making sure that the content of toast messages is always non-essential to completing a task.
If more time is needed to read the toast's content, then a longer timeout duration can be set. A user can also hover over the toast with their mouse to pause the timer. Auto-dismiss toasts also include a visual timer, to show how long remains until it disappears.
If any actions are included within a toast, then it can’t be set to auto-dismiss. This gives a user extra time to locate and trigger the action.
For Assistive Technology
Auto-dismissible toasts use a role of alert, which uses anaria-live
region to announce the contents immediately to users of assistive technology.
Toasts that don't auto-dismiss use a role of dialog and focus is moved to the toast when displayed. After dismissing the toast, focus is returned to the same position on the page that was focused before the toast was displayed. Focus is also trapped between the toast's interactive elements, so that users can complete the action quickly and easily.
PressingEscape
on the keyboard will dismiss manual toasts immediately.
Based on
The toast component has been based on the following resources:
-
A toast to a11y toasts , Scott O’Hara, accessed March 20222. -
Scraping burned toast , Adrian Roselli, accessed March 2022. -
Defining toast messages , Adrian Roselli, accessed March 2022. -
2.2.1 Timing adjustable , WCAG 2.2, accessed April 2024. -
Dialog role , MDN web docs, accessed March 2022.
Testing
We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.