Carousels
Carousels are all over the web. Websites often use them to promote a few different pieces of content as a center piece. However, research has been done which shows users don’t really interact with carousels, or if they do, they only interact/see the first slide. Oftentimes, carousels are simply a way to compromise on what is the most important piece of content for the page–allowing you to promote multiple. different things.
In terms of accessibility, carousels are not ideal and pose some issues. To a visually impaired person, they are rapidly changing images which are controlled by an often arbitrary or non-existent set of buttons. If these images are presenting the most important content on your website, consider using something that’s not relaying content through an image so that all users will have access.
Best Practice
Many of the following best practices are adapted from Gian Wild’s article “The Unbearable Inaccessibility of Slideshows.”
Provide a pause button and do NOT use autoplay (this can cause seizures).
All slideshow/carousel navigation and pause/play buttons must be keyboard accessible and have adequate color/contrast ratios.
Also make sure the hover and focus states are visibly obvious.
Provide an alternative to the content in the slideshow (especially the content that is on slides other than the first).
Give elements in a slideshow a clear focus order (meaning you will either make the html fall in the correct order, or add different tab index values to dictate the tabbing order).
Include 5 or fewer elements in the carousel (suggested by Nielsen Norman Group).
Tell the user how many slides there are, and where they are in that slideshow.
Tools & Resources
- Should I use a carousel?
- Carousel Interaction Stats by Erik Runyon
- Nielsen Norman Group: Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors
- The Unbearable Inaccessibility of Slideshows