Keyboard interactions
Key
Interaction
Tab
Places the focus on the next interactive element, which is either a button or a close button.
Shift + Tab
Places the focus on the previous interactive element, which is either a button or a close button.
Space or Enter
If focus is on the close button, dismisses the toast. If focus is on the button, executes the button action.
Esc
Dismisses the toast. This is equivalent to selecting the close button.
Cursor guidelines
Cursor
Usage
Default (Arrow)
Use the default cursor for non-interactive areas on the toast.
Pointer
Use the pointer cursor for interactive areas on the toast such as the close button.
WCAG 2.2 compliance
Any criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system.
1 . Perceivable
Requirement
Criterion
Level
Compliance
Non-text content
A
Non‑text elements—such as icons used in toasts—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.
Info and relationships, Identify purpose
A, AAA
Toasts should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.
Use of color
A
Color is never used as the sole way to convey meaning in toasts. Toasts use color to reinforce their meaning, but every toast also includes a clear text description that communicates purpose.
Text contrast minimums
AA
Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.
Visual presentation
AAA
The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.
Text spacing
1.4.12
AA
Line height of text is at least 1.5x the font size in wrapped tooltips.
2 . Operable
Requirement
Criterion
Level
Compliance
Keyboard
A, AAA
All functionality of the component is operable through a keyboard without specific timing for keystrokes.
Timing adjustable
A
Toasts should not auto-dismiss. If they do, users need a way to extend, pause, or dismiss time-limited content. Hovering, clicking, or keyboard focusing on the toast should keep it from disappearing.
Seizures and physical feactions
A, AAA, AAA
There is no flashing content or unnecessary motion or animation in this component.
Focus order
A
Navigation sequences receive focus in an order that preserves meaning and operability.