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
Code examples
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 criteria:
- The group has a name
- New slides titles are announced
- Arrow keys advance the slides
<div class="carousel">
<h2 class="h-bravo" id="carousel-title">
NATO alphabet gallery
</h2>
<div class="carousel-nav">
<button class="previous" aria-described="carousel-title">
<span class="hidden">Previous slide</span>
</button>
<button class="next" aria-described="carousel-title">
<span class="hidden">Next slide</span>
</button>
</div>
<ul class="slide-list" role="group" aria-labelledby="carousel-title">
<li class="slide visible" tabindex="-1">
<h3 class="h-charlie" role="status">
Alpha/Alfa
<span class="position">1 of 7</span>
</h3>
<p>
Pronounced al fah
</p>
<button class="next">
Start
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Bravo
<span class="position">2 of 7</span>
</h3>
<p>
Pronounced brah voh
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button class="next">
Next
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Charlie
<span class="position">3 of 7</span>
</h3>
<p>
Pronounced char lee
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button class="next">
Next
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Delta
<span class="position">4 of 7</span>
</h3>
<p>
Pronounced dell tah dell tah dell tah. Can I help yah help yah help yah?
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button class="next">
Next
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Echo
<span class="position">5 of 7</span>
</h3>
<p>
Pronounced eck oh
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button class="next">
Next
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Foxtrot
<span class="position">6 of 7</span>
</h3>
<p>
Pronounced foks trot
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button class="next">
Next
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Golf
<span class="position">7 of 7</span>
</h3>
<p>
Pronounced golf
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button>
Submit
</button>
</li>
</ul>
</div>