Put simply, a carousel displays multiple messages in succession by rotating through them one by one. Similar to a slideshow, common elements of a carousel are sets of images, text, or videos (or a combination of each) that slide, fade, or otherwise move through a cyclical view (see the example from ncrdbc.com below).
The Pros
The primary positive of using a carousel is that it allows more than one piece of content to occupy a single space. As mentioned, they are especially common on website homepages, often featuring prominent news and messages.
Carousels can help satisfy the sometimes competing needs of internal stakeholders who require multiple levels of content to be featured on the homepage. As a common website feature, the carousels can solve this problem while working within a limited homepage space.
The Cons
While common, carousels can be inaccessible (read our article to learn more about what web accessibility is). Hidden text, automatic rotation, and lack of a visible focus are common carousel accessibility issues.
These accessibility concerns can be addressed within carousels, but even so, carousels may not live up to their purpose as few users actually click through the carousel, only seeing the first slide—meaning content may go unseen.
Best Practices for Carousels
1. Make them accessible
The W3 Web Accessibility Initiate (WAI) has 4 guidelines for accessible carousels:
- It is strongly recommended not to create an auto-rotate carousel. If this feature is used, ensure there is a way for users to pause the rotation
- The carousel navigation should be accessible by keyboard
- Carousel slide changes should be communicated to all users, including screen reader users
- Keyboard focus should be visible
Reminder: Do not use text in images. If carousels are being used for promotions as opposed to displaying beautiful imagery we recommend adding an additional field for this information (see example below from southdundas.com).
2. Fewer slides are better
Users rarely click past the first slide on a carousel. Try to limit the number of slides on a carousel to avoid content getting missed by the majority of users. Be sure to review slides and remove stale content—with 'infinite slides,' there is the risk of carousels becoming a digital dumping ground.
3. Use high-quality images
Double-check the recommended image size for your carousel, and ensure the image you plan to use is the correct size and ratio. This is especially important for homepage carousels, which are often the first high-impact visual a user sees on your site.
4. Be content-wise
Create easy-to-skim content with a clear call to action as carousels do not have a 'captive audience'—users most likely did not come to your website to view the carousel. In a similar vein, do not use a carousel for urgent or emergency-related information as users may miss it due to 'banner blindness.'
For more tips about website content management and the Drupal content management system (CMS) view our other articles: