Skip to main content Skip to site Map

Snackbar

How to test a snackbar

Gherkin Condensed

Given that I am on a screen with a snackbar

1 Keyboard

WHEN I use an action that opens a snackbar I SEE the snackbar text
Then when I use the arrow keys I SEE the snackbar can be browsed
Then when I use the tab key I SEE focus moves to interactive controls in the snackbar

2 Android screenreader

WHEN I use a screenreader AND I use an action that opens a snackbar
- I HEAR the snackbar text is announced on appearing
- I HEAR when dismissed manually, focus returns to meaningful next step
Then when I swipe I HEAR focus moves to the snackbar at the end of the screen
Then when I swipe within a snackbar I HEAR focus moves to interactive controls in the snackbar

3 Device settings

When I use Text resize I SEE text content can resize up to 200% without losing information

1 Keyboard actions

When I use	I see/hear
Triggering action	Focus does not move to the snackbar
Arrow keys or tab	Moves focus to the snackbar at the end of the screen
Space or enter	Activates any controls in the snackbar

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the snackbar at the end of the screen
Doubletap	Activates any controls in the snackbar

3 Screenreader output

Reads	I hear
Name	The snackbar text is announced on appearing
Group	When dismissed manually, focus returns to meaningful next step

4 Device settings

When I use	I see
Text resize	Text content can resize up to 200% without losing information

Usage

Snackbars show short updates about app processes at the bottom of the screen.

Must not be used to confirm destructive actions (ex: Are you sure you want to delete your account? Yes/No)
Snackbars shouldn’t interrupt the user’s experience
Usually appear at the bottom of the UI
Can disappear on their own or remain on screen until the user takes action

Material guidance

Material accessibility overview