|Info toast||A neutral message|
|Success toast||A successful message|
|Warning toast||A warning message|
|Error toast||An error message|
Toasts should only be used for confirmations, simple notifications, and low-priority alerts that do not need to completely interrupt the user experience. Dialogs are ideal when a situation requires the user's attention, either for displaying important information or prompting for a response.
The toast position is always bottom center of screen.
Actionable toasts should only have one button.
Actionable toasts should not have a button with a redundant action. For example, “dismiss” would be redundant because all toasts already have a close button.
Max two toasts can be present at all times. If two toasts are present, and a new one is presented, remove the oldest toast.
Whenever a toast is present, use srSpeak to read the messagge to the user.
New to WCAG 2.1, satisfying Guideline 4.1.3 requires that:
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
Using ARIA techniques such as role alert and aria-live, toast messages can be made available for screen reading technologies as soon as they are displayed.
If a Toast has got focusable elements, make sure the focus is set to the first focusable element when the toast is in the view.
Also, make sure you have focus trapped the keyboard navigation when focusing the first focusable element.
The user can navigate the focusable elements with Tab and Shift+Tab. The user can also use Enter for interactive elements.
By default, a toast will dismiss after 5 seconds. A toast also has the option to be closed by a close button, when an action is used. If an auto dismissable toast is used, make sure that the action is still accessible elsewhere in the application.