Product carousels are a common feature on eCommerce websites, but they can introduce potentially serious accessibility issues.
Ultimately, the accessibility of carousels depends on their implementation. In this article, we’ll discuss the pros and cons of product carousels — and provide a few quick tips for avoiding common barriers that may affect users with disabilities.
Do product carousels actually drive sales?
Carousels (also called “sliders" or “slideshows") remain incredibly popular. Many designers believe that carousels are essential for promoting new products, building a brand story, and encouraging customers to interact with a website.
But while content carousels can be visually appealing, they’re not always the best way to engage with real-life users. In a 2013 analysis performed by Erik Runyon, technical director for marketing communications at the University of Notre Dame, found that clickthrough rates for carousel items dropped off drastically after the first slide.
And while Runyon’s analysis was limited to Notre Dame websites, many other web designers and marketers have questioned the value of carousels over the past few years. Most of the criticisms come from common problems with implementation, many of which impact accessibility:
- As content managers add more slides, carousels become less effective at driving engagement. This also creates a readability issue for people who use screen readers (software that converts text to audio or braille), who may need to skip through every slide before accessing the rest of your site’s content.
- Carousel images almost always include substantial amounts of text, which may be too lengthy to include in alternative text (also called alt text or alt tags).
- Carousels can consume serious bandwidth, depending on how images are served.
- Moving carousels may annoy users, regardless of their abilities. One eye-tracking study from the Nielsen Norman Group found that U.K. internet users ignored carousels that moved automatically, with one user reporting: “I didn’t have time to read it. It keeps flashing too quickly.”
That leads us to two big questions: Are product carousels worth the effort — and if so, can they be accessible?
Product carousels aren’t always the right tool for the job, but they can be accessible
Given the drawbacks, you might simply decide to use other methods to promote new products and welcome visitors to your website. Generally, this is the safest (and easiest) approach. Last year, we wrote about accessible alternatives to carousels, and most of those alternatives are much easier to implement.
With that said, your website might have a legitimate reason to use a carousel — and if you already have a carousel that measurably drives engagement, it doesn’t make much sense to eliminate it entirely.
But you can certainly avoid accessibility issues when designing (or redesigning) your carousel, and by doing so, you’ll provide all users with a better experience. The Web Content Accessibility Guidelines (WCAG), the consensus standards for accessibility, can help you build a carousel that appeals to more users.
Some quick tips to keep in mind:
- Never use autoplay. Yes, we know that most carousels move automatically, but autoplay is always challenging for accessibility — and as we discussed earlier, moving content often annoys your users.
- If you absolutely must use autoplay, give users a way to pause carousel movement. This fulfills WCAG 2.1 Success Criterion (SC) 2.2.2, “Pause, Stop, Hide.”
- Try to avoid using images of text. Make sure all images have accurate descriptions that follow the best practices of writing alternative text.
- Consider using a CSS carousel. Jennifer Wjertzoch has written an excellent guide to building a WCAG-friendly carousel using native semantic HTML to improve screen reader accessibility.
Finally, make sure your product carousel uses appropriate markup to relay semantic information to screen readers and other assistive technologies (AT). Proper markup improves experiences for AT users and can also complement your site’s search engine optimization (SEO) strategy.
For more detailed guidance, read: Carousels and Accessibility: 7 Tips.
Remember, prioritizing accessibility grows your audience
eCommerce websites have a legal responsibility to provide accessible content, but accessibility isn’t an obligation: It’s an opportunity to gain an enormous competitive advantage.
Earlier this year, we wrote about how accessible design improves key eCommerce metrics, including social media engagement, bounce rates, customer retention rates, and shopping cart abandonment rates. When your website follows WCAG, it works better for every user — regardless of their abilities — and your content reaches a much wider audience.
To learn more, read about five of the most common eCommerce web accessibility issues or test your site against WCAG with our free automated analysis.
