UX design notes
Think carefully before you use a carousel or slideshow wizard. Consider another way to present the information.
Carousels are almost always a poor design choice
- As a general rule, carousels should be avoided for critical functionality unless there is a strong business case.
- People must be highly motivated to engage with a carousel beyond the first slide.
- The cognitive load is immediately increased over other patterns aas the user must determine 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?
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
- This can work because it helps people stay on task.
- A list of easily recognizable structure, like “US Presidents”
- This can work because the scope and contents are predictable.
- Highlighted customer reviews
- This can work to build trust because the contents are predictable and a motivated user seeking social proof may be willing to navigate the carousel.
Avoid auto-advance carousels
- This is distracting for people with attention differences
- Live carousel updates are noisy for the screen reader
Use semantic HTML
This is one example of an accessible carousel wizard.
- It is not the only way to build a carousel, but it meets all the critieria:
- The group has a name
- New slides titles are announced
- Arrow keys advance the slides
NATO alphabet gallery
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