Real estate on a web page is precious. Every web designer or marketer at some point has felt that there simply isn't enough space to show all the content they want to show. The carousel offered an apparent solution to that problem by cramming several content pieces into the same space, rotating to be individually visible either automatically or by the user's control. The ability to show more content in less space in a way that looked cool made carousels attractive and they can now be seen all over the web. They'd be a great idea if it weren't for two big problems: they don't work and they aren't accessible.
Carousels aren't effective
Carousels were cutting-edge at one time. Everyone wanted them in their redesigned websites because they seemed innovative and engaging. It turns out, they're not engaging (at least not any longer) and users tend not to interact with them compared to other content displays.
About 1% of people click on carousels
There have a been a handful of studies around this and some claim slightly higher engagement rates, but most hover around 1% and none that we've seen make it into double-digits.
For all the money and time invested in carousels and the prominent space they likely fill, one would hope they'd be more impactful — but the numbers say otherwise.
Carousels are now associated with ads or junk content
Rotating content presentations didn't only provide the opportunity to squeeze more into less using the company's own content. They also presented the chance to sell a growing number of ads in a fixed amount of space.
Over time, this trained website visitors to mentally associate carousels as the web page equivalent of junk mail. Even if the content in the carousel blocks is great and legitimate, most users will never move through it to find out. This doesn't happen by accident, but people actively block it out, exhibiting "banner blindness," which the Nielsen Norman Group defines as "people's tendency to ignore page elements that they perceive (correctly or incorrectly) to be ads."
Carousels aren't accessible
Carousels present quite a few accessibility challenges so we aren't going to go into a lot of detail on any of the particular aspects. Here are some of the main issues that tend to accompany the use of carousels on a web page:
- Many carousels rotate automatically. Any content that automatically scrolls or animates for longer than five seconds needs a clear and fully-accessible way to turn it off. WCAG 2.1 success criterion 2.2.2, Pause, Stop, Hide, explains the issue further. Also check out Why Autoplay Is an Accessibility No-No.
- They're usually not easy to use on mobile. Accidentally selecting a link when meaning to scroll horizontally or choose a previous or next button happens to everyone, but the ability to go back and try again with more precise motor skills can't be taken for granted. Taking mobile use into account can be just as important as the desktop experience. Check out 5 Smartphone Usage Statistics and the Growing Importance of Mobile Accessibility.
- Carousels are hard to get right for screen reader use. What should happen if a carousel were made to be more accessible is that a screen reader user would know they're interacting with a carousel; they'd have intuitive, clearly-labeled navigation controls that are logically positioned in the tab sequence; the element within the carousel that they're interacting with would match the visual presentation on the screen, meaning they wouldn't be navigating and using a currently-invisible piece of content (likely indicating an issue with focus order and other WCAG requirements); and more. This is on top of the content within each section being individually accessible. It's a lot to get right and there's a lot that can and usually does go wrong.
Alternatives to carousels in web design
Focus or target messaging
The more-is-more mindset when it comes to how many messages to deliver to a website visitor hasn't proven effective. So one option to replace the carousel is to choose a specific and a focused piece of content that is most likely to resonate with the target audience.
Introduce high-level topics, with dedicated pages for detailed information
Getting rid of a carousel doesn't mean hiding the information, but it can be more effective to introduce a subject with a clear and accessible link, keeping the rest of the detail on a separate and focused page. With too much competing for one's attention, all of the extra images, headings, sub-headings, and copy probably will have the opposite effect than what's intended. So depending on the subject and the options available for categorizing links, presenting them in a straightforward manner and letting the visitor choose what they're looking for can make a big improvement.
Columns or buckets
Two- or three-column displays of content can be a great compromise to a rotating version of the same. The right amount of content is less likely to overwhelm and more like to engage. Columns that are always present offer a few distinct and important benefits that rotating carousels do not:
- The reader knows how much material there is up-front. All of the content is available without going down the rabbit hole to find out.
- The mobile experience should be much better than a rotating carousel, as long as the design is responsive and the content stacks or organizes properly. Carousels are notoriously difficult to use on mobile devices.
- The labels and structure are much easier to build initially and maintain over time. Always-present columns are more what-you-see-is-what-you-get. Carousels, on the other hand, require developers to make sure they work properly with screen readers and keyboards, and that all labels, navigation, and focus are accessible — even as content is updated.
Videos
Videos can be very engaging and effective when there really is quite a bit to share or explain about a topic. They also rank really well in search engines and have the potential to be shared. From the user side, videos are usually enjoyable (as long as they're accessible); from the business side, videos offer some interesting benefits like the ability to track how long people watched a video and to add some life and personality to the subject matter.
Please read Checklist for Creating Accessible Videos to ensure everyone can access the content.
Update content as needed
One of the hesitations to getting rid of carousels is the fear that it means giving up the chance to highlight every product or promotion that needs highlighting. In reality, every product or promotion probably doesn't need to be in focus at all times. It can be much more user-friendly to deliberately choose one or two top products or promotions and give them the space they deserve — and update when it's time to update.
Was this content helpful?
Subscribe to our blog and newsletter.
