Accessibility
Keyboard
|
Key |
Interaction |
|---|---|
|
Tab |
Places the focus on the next interactive object, 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 you are focused on the close button, dismiss the toast. If you are focused on the button, execute the appropriate action. |
|
Esc |
Dismisses the toast. This is equivalent to selecting the close button. |
Focus order
Keyboard navigation is constrained to the dialog. Tab cycles through the components that take focus.
Toast component focus order
Design Checklist
|
✅ |
Accessible use of color Color is not the only visual means of conveying information and meets a minimum of Level AA WCAG standards. |
|
✅ |
Accessible contrast for text Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text. |
|
✅ |
Accessible contrast for UI components Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1. |
|
✅ |
Keyboard interactions Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions. |