Overview
Snackbars should be announced to screen readers when they appear whilst avoiding interruption of the user's current task. Ensure snackbar content is accessible and dismissible.
Maintain adequate colour contrast (4.5:1 minimum) and make sure interactive elements have sufficient size for easy interaction.
Keyboard Interactions
|
tab |
Moves focus to interactive elements within snackbar |
|
Shift + Tab |
Moves focus backwards through snackbar elements |
|
enter |
Activates action buttons or links within snackbar |
|
escape |
Dismisses snackbar when it has focus |
Semantic Markup
- Use role="status" for informational snackbars that don't require immediate attention.
- Use aria-live="polite" to announce snackbar content to screen readers without interrupting current activities.
- Use aria-label for close buttons to clearly communicate dismissal functionality.
- Ensure action buttons or links within snackbars are properly labelled and keyboard accessible.
- Consider aria-describedby to associate snackbar messages with triggering actions when relevant.