Skip to main content Skip to site Map

Design Carousel slideshow

How to design a carousel slideshow

WCAG Disabilities

A carousel slideshow must meet WCAG principles:

1 Perceivable

Text can resize up to 200% with no loss of information - 1.4.4 AA

2 Operable

All functionality is operable with the keyboard - 2.1.1 A
Controls and content are read/focused in a meaningful sequence - 2.4.3 A
Includes visible pause, stop and hide controls for automatically moving content - 2.2.2 A
Instead of swipe gestures, it can also be operated with a single tap - 2.5.1 A
Motion/animation can be disabled by device reduced motion settings - 2.3.3 AAA

4 Robust

Name, role, state is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

A carousel slideshow must work for people with disabilities:

Cognitive

Motion/animation can be disabled by device reduced motion settings - 2.3.3 AAA
Includes visible pause, stop and hide controls for automatically moving content - 2.2.2 A

Low vision

Text can resize up to 200% with no loss of information - 1.4.4 AA

Motor

All functionality is operable with the keyboard - 2.1.1 A
Instead of swipe gestures, it can also be operated with a single tap - 2.5.1 A

Blindness

Name, role, state is documented 4.1.2 A
Controls and content are read/focused in a meaningful sequence - 2.4.3 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

UX

Think carefully before you use a carousel or slideshow wizard. Consider another way to present the information.

Consult Should I use a carousel?

Carousels are almost always a poor design choice

People must be highly motivated to engage with a carousel beyond the first slide
The cognitive load is immediately increased over other patterns as the user must learn how to use the carousel
- Is it easier to use previous/next buttons?
- Is it possible to swipe left/right?
- How many slides are present?
- What are those dots at the bottom?

Are there any good use cases for a carousel?

Carousels are worth testing against a normal scrolling format when people can generally predict what’s in the carousel.

A multi-step form to help people stay on task (when proven effective by production multivariate testing)
Customer reviews to build social proof for customers motivated enough to navigate the carousel
A list with easily recognizable structure, like “US Presidents” where the scope, sequence and contents are predictable

Don’t use auto-advancing carousels

This is distracting for people with attention differences
Live carousel announcements are disruptive for people using a screen reader to browse other content

NATO alphabet

Alpha/Alfa 1 of 7

Pronounced al fah
Bravo 2 of 7

Pronounced brah voh
Charlie 3 of 7

Pronounced char lee
Delta 4 of 7

Pronounced dell tah dell tah dell tah. Can I help yah help yah help yah?
Echo 5 of 7

Pronounced eck oh
Foxtrot 6 of 7

Pronounced foks trot
Golf 7 of 7

Pronounced golf

Annotations for carousels

Give each icon <button> a name
Define what should be announced on slide change (like “Slide 2 of 7”)
Define where focus should land on slide change (depending on previous/next control used)

Related carousel slideshow entries