One of the largest web trends over the past decade has been the proliferation of 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 effective to this end? Along with WCAG 2.0 Level AA compliance issues, countless statistics and studies show, carousels aren’t as effective as once thought.
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)
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. For websites in the past, this phenomenon was mostly associated with sidebar banner advertisements, but has become applicable for carousels as well. Shockingly, only 1% of users studied clicked on a banner inside a carousel. Similar studies show that any slide beyond the first goes mostly ignored by users.
Auto-rotation affects conversion
Studies by the Nielson Norman Group demonstrate that users miss critical information because of slider auto-rotation. Auto-rotating sliders do not give people enough time to digest information, and most users will be too distracted by the movement itself that the information of each slide is lost.
WCAG compliance issues with carousels
Third-party plugins are not easy to fix without a background in coding. Trying to maintain WCAG 2.0 Level AA compliance can be problematic, as most carousel plugins are flagged by accessibility evaluators. Carousels pose many issues for accessibility.
More 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 need to be large enough that moving to the next slide does not require precision. There should also be indicators for the total number of slides.
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 serving as a call-to-action.
- Specialized Landing Pages –Make the secondary pages stand out and target different user segments.
What if I need to keep my slider?
Perhaps you are not in a position to completely upend the table on your website but still want to try and improve the accessibility, what are your options? If you have the ability to do so, here are a few options:
- Disable auto-rotation. Allow the user to advance to the next slide if they choose to. This will mitigate some of the information overload.
- 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 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 them altogether, if this is not already done automatically.
- 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 create issues when scaling down to smaller screen sizes.
- Reduce amount of sliders. Knowing that most users are likely only going to view the first slide, it makes little sense to have seven sliders. 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-621-4491 or email us.