Skip to main content Skip to site Map

Carousel

How to test a carousel

Gherkin Condensed

Given that I am on a screen with a carousel

1 Keyboard

WHEN I use the tab key or arrow key to move focus to a slide I SEE focus is visually indicated
Then when I use the spacebar to activate the slide I SEE the action occurs

2 Android screenreader

WHEN I use a screenreader AND I swipe to focus on a slide or control
- I HEAR the purpose of the carousel is clear
- I HEAR it identifies as container
- I HEAR the purpose of the slide is clear
- I HEAR it identifies as list item, index (ex: 3 of 5)
Then when I doubletap with the slide or control in focus I HEAR the focused carousel item activates

3 Device settings

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

1 Keyboard actions

When I use	I see/hear
Tab or arrow keys	Moves to the previous or next carousel item
Spacebar or enter	Activates the focused carousel item

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the next slide or controls
Single point control	Focus moves to the next slide (ex: next button)
Doubletap	Activates the slides or controls

3 Screenreader output

Reads	I hear
Carousel name	The purpose of the carousel is clear
Carousel role	It identifies as container
Carousel slide	The purpose of the slide is clear
Slide role	It identifies as list item, index (ex: 3 of 5)

4 Device settings

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

Usage

Carousels show a collection of items that can be scrolled on and off the screen

Four layouts: Multi-browse, uncontained, hero, and full-screen
On vertically-scrolling pages, carousels require an accessible way to view all the items without horizontally scrolling. (This requirement doesn’t apply to full-screen carousels.)
Material recommends adding a Show all button below the carousel, which opens a dedicated vertically-scrolling page of all carousel items.

Material guidance

Material accessibility overview

Related carousel entries