This article was most recently updated in Nov. 2024
One web trend that has recently declined considerably in popularity but is still seen on a surprising number of websites is carousels – also known as sliders. They are the internet equivalent of an electronic billboard.
Sliders are intended to grab the attention of the user, point them to a particular page, or emphasize a sale or promotion. But is a carousel actually a good way to do that? Along with the fact that they create WCAG compliance issues, countless statistics and studies show that carousels really aren’t an effective feature on your website.
Banner Blindness Affects Conversion
Banner blindness is a term used to refer to people overlooking a section of the website because it looks like an advertisement. This phenomenon was long associated with sidebar banner advertisements but is just as applicable to sliders. Shockingly, one study reported that only 1% of users clicked on a banner inside a carousel. Similar studies show that any slide beyond the first goes mostly ignored by users, and since the release of the study linked above, most web developers are now avoiding adding carousels to new sites as a matter of general best practices.
Auto-Rotation Affects Conversion
Studies by the Nielsen Norman Group demonstrate that users miss critical information because of slider auto-rotation. Auto-rotating (or auto-advancing) sliders do not give people enough time to digest information, and most users are so distracted by the movement itself that the information on each slide is lost.
WCAG Compliance Issues With Carousels
Carousels pose many issues for accessibility. Trying to maintain WCAG 2.0 Level AA compliance can be problematic, as most carousel plugins are flagged by accessibility evaluators, and third-party plugins are not easy to fix without a background in coding.
Specifically, carousels pose challenges for those with motor and or cognitive disabilities. Controls for sliders are often difficult to access, confusing, and uninformative. Arrows or navigation dots are usually so small as to require unnecessary precision to click or tap them. Many sites fail to provide information on the total number of slides, making effective navigation through even a short carousel frustrating.
Jared Smith, an accessibility expert, has repeatedly advised companies and developers to forego sliders due to the number of accessibility problems posed to keyboard and screen reading software:
“Beyond usability frustrations caused by carousels for all users, there are several distinct issues for users with disabilities. For auto-playing carousels, having content automatically disappear can cause loss of focus for screen reader and keyboard users that are reading or have keyboard focus on that content when it animates away. This can force the user back to the top of the page.
There also is no easy way to semantically or programmatically associate the controls for a carousel—often just numbers or dots—with the carousel content. This is especially difficult for users that cannot see the interface. The cognitive load and distraction caused by carousels can be especially difficult for some users with cognitive and learning disabilities.” (http://www.creativebloq.com/accessibility-expert-warns-stop-using-carousels-7133778)
Alternative Design Strategies
There are a couple of different design strategies that can be implemented as an alternative to a slider, if you want to avoid all the hassle:
- Static Image– Rather than having rotating images, just have a single large, static image that serves as a call-to-action.
- Specialized Landing Pages –Make links to your site’s secondary pages stand out and target different user segments.
What If I Need to Keep My Slider?
If you are not in a position to completely upend the table on your website but still want to try and improve its accessibility, what are your options? Here are a few:
- Disable auto-rotation. Allow the user to advance to the next slide when and if they choose to. This will mitigate some of the information overload and improve the overall user experience.
- Increase the size of controls. Make sure any arrows and dots are sizable enough that users with motor impairments or low vision are able to access them.
- Remove the slider on mobile. Mobile devices have only so much real estate to work with, and scaling carousels to work on mobile can be more work than the payoff is worth. Consider disabling sliders on mobile altogether, if this is not already done automatically by your site’s CMS.
- Shorten text. Slider text should ideally be a brief bullet point of about a sentence length. Anything more than that will likely be too long to be of value to customers and will create issues when scaling down to smaller screen sizes.
- Reduce number of slides in the carousel. Knowing that most users are likely only going to view the first slide, it makes little sense to have seven banners. Try to reduce the number to about two or three and evaluate if those slides are effective in driving traffic.
Need Help Maintaining WCAG Compliance?
We can help. Give us a call at 478-606-0541 or email us.
This is the third article in our four-part ADA Compliance series. Discover the other articles in our series:
- Part One: The Importance of Having an ADA Compliant Website (read here)
- Part Two: ADA Website Compliance & How Color Impacts Your Website’s Accessibility (read here)
- Part Three: WCAG Compliance & Rethinking the Carousel Trend
- Part Four: Website Accessibility Test … Is Your Website Navigable Without a Mouse? (read here)
Detailed Marketing Deets
Want some profound insight into all things marketing? Check out our Definitive Guide Series for detailed information, tips, and advice regarding: