The toast is a dynamic way of displaying relevant and short information to the user. The toast terminology refers to the slice of bread that comes out of a toaster. Just like the real thing, the digital version frequently has a popping out effect and is activated following a user interaction.
Appropriate usage
This component can potentially be used in two different ways. The first way is to show non-critical information, meaning that the content of the toast is trivial and doesn’t affect the user’s flow. The second way of using this component is to present critical information. This type of toast could be used to display crucial information that the user needs to pursue a specific flow.
These two types of toast have different semantics and behaviours; for both, however, the toast appears after the user has triggered it in some way.
Expected interactions of a non-critical toast
General considerations
- Ensure a toast disappears after at least 60 seconds.
- Use a method to announce the content without changing the focus or using the dialog role.
- Add a page or section within the site with the history of all notifications to ensure compatibility with small screens and magnification.
Keyboard interactions
Avoid any type of keyboard interaction within the toast since they won’t be easily operable by keyboard users.
Screen Reader interactions
Use the aria live region on the container so that the toast content is announced to assistive technologies.The polite setting is recommended because it’s the least intrusive.
Expected interactions of a critical toast
General considerations
Ensure this type of toast can only be dismissed by the user with a close button.
Keyboard Interactions
- Move the keyboard focus to the toast container when it opens. (Do not use the dialog role on the toast container since it should only be used on an overlay window pattern like a modal.)
- Provide a keyboard-accessible button to dismiss the current toast.
- Provide focus management after the toast is dismissed, thus returning the focus to the trigger button.
- A keyboard trap is needless since it’s not a modal.
Screen Reader interactions
Since the focus is moved programmatically when the toast is displayed, the assistive technology user has full control on viewing its content.
Example of the toast component
Making the toast component more user-friendly
- Make the toasts as obvious as possible visually.
- Use other ways of displaying important messages statically. In other words, try to avoid this component.
- Do user testing to ensure that the pattern is understood by all your users.
Related content