So, your client or stakeholders want to use a carousel. You tried to talk them out of it; you illustrated the numerous usability problems that a carousel can introduce; you affected your most pleasant and conciliatory smile that says, “I understand your reasoning and support your decision,” while your client explained that three different stakeholders want three different hero images and rather than sorting out which is the most indispensable it would be easier just to include them all. Now you’re locked into your fate and it’s time to make lemonade out of limes.
What We Talk About When We Talk About Carousels (a sequel by Raymond Carver)
The archetypal “carousel” is a series of rotating slides with text and image content that appears in the “hero” section, or the most predominant and viewable section, of a webpage. One slide appears at a time, replacing the one before it, and usually advancing automatically. The navigation controls tend to appear as little, gray dots. Like a static hero banner, the content of a carousel usually features brand-forward products, special sales or the most high-priority information on the page.
Before we get to the muck-raking, we should first acknowledge that carousels can be used correctly. This Webflow article on Carousel/Slider Design Best Practices gives some “when to use” criteria:
- When there’s a precedent for a carousel – like LinkedIn SlideShare, a site devoted to hosting and sharing presentations
- When a carousel saves people time and clicks – think Netflix, Amazon Prime Video, or any other catalog where there’s so much content and categories that this organization scheme makes logical sense
- When the content is visual and simple
- When the carousel helps people compare things – one item remains stationary while comparable items slide in and out of view
- When it saves a person’s place – keeping many items in a single row means fewer page navigations and a smaller chance of losing your spot
Most of the time, however, carousels are not used in any of these tolerable ways. They are most commonly used when a stakeholder could not decide which image or product to promote in the most prominent spot on a webpage. As we will see, this indecisiveness shapes a design that most users will bypass altogether.
The Usability Problems
Carousels are not an effective means of grabbing attention because users see them as an advertisement, and many consumers don’t waste their time with ads. Jakob Nielsen confirms this in a usability study: a webpage presented an auto-advancing carousel with an ad for a deal on washing machines. Researchers tasked the user with answering the question, “Does Siemens have any special deals on washing machines?” The user was unable to complete the task, even though the first carousel slide reads “Receive up to 100 pounds cash-back” in 98 point font, the largest text on the page.
Nielsen concluded that “banner blindness” was the most important factor in the problem. Not only did the ill-fated carousel rotate automatically — like a flashing banner ad — but it was indeed an advertisement. We are so well trained to avoid advertisements, and so mistrustful of them, that even a user seeking out the ad could not find it.
Science Digression: The Persuasion Knowledge Model
Psychologists have been researching the mistrust of consumers for advertising and marketing schemes since the 90s, when Friestad and Wright (1994) proposed the Persuasion Knowledge Model. This model demonstrates how consumers use their knowledge of a topic or product, knowledge of the marketing agent, and knowledge of persuasion tactics in order to counteract a persuasion attempt with coping behaviors.
Anyone who has searched Google for an air conditioner or any product or service is familiar with the sponsored ad results that show up before all the others. Google probably makes the argument to these retailers that consumers are most likely to click the first link presented to them, but that is only true as long as consumers trust the reliability of these elevated ads. As soon as they recognize that the sponsored advertisement is not the cheapest or the best option, and that the sponsored seller has simply paid Google more than the others or won the bid for ad space, then the user has acquired persuasion knowledge and the success rate of the persuasion attempt drops significantly.
A 2013 Nielsen Norman article by Kara Pernice recommends that, rather than using a carousel for marketing promotions, websites should employ a single, eye-catching hero image. The Best Buy ad above, for instance, is more informative because the designers fit all the important content into a single area, and it is less distracting than auto-rotating slides. Furthermore, a single, static image guarantees that it will be seen, while a 5-slide panel can only guarantee that 20% will be seen. This brings us to the next usability problem with carousels…
Single-Item Visibility
A carousel tells users, “Here is some content we think you’ll like. Also, if you want to see other stuff like it, you could navigate or wait a couple seconds (please!)” The problem here, beyond consumer mistrust and general cynicism, is that users are lazy: they don’t want to work, and they don’t want to wait. To the stereotypical Millennial, head-down, head-phoned and tapping at a screen, any delay or extra effort is an exceptionable indignity. And to all users, simple consumer expectations tell them that essential information and doorbuster products will be served up on a silver platter so they can get to it quickly. In the timeless words of Steve Krug: Don’t make me think!
The Accessibility Problems
Not only are carousels ineffective, distracting and frequently ignored, they also present accessibility barriers that affect people with a variety of disabilities.
In the first place, many carousels auto-advance; they go round and round, endlessly. This intermittent motion, like any persistent animation, can cause users with visually-triggered vestibular conditions to experience dizziness, imbalance and even nausea — so when your users tell you that your carousel makes them sick, you should believe it. Users with ADD/ADHD or other conditions that make concentration difficult may find that each slide rotation distracts them from what they are reading; these users may have to reread the same line of copy multiple times before giving up entirely. Furthermore on the topic of neurodiversity, some users simply need more time to read. For these users, auto-advancing slides may make it impossible for them to read any part of a carousel in its entirety. Furthermore, screen reader users might just be sitting there going, “WHY do I hear the site changing every 5 seconds?” until they decide to leave and visit your competitor.
Even carousels that don’t auto-advance can be problematic. When one carousel slide is active, the rest should be invisible, but sometimes developers leave those “invisible” slides accessible to screen readers, and without context, the disorganized groups of content can appear incomprehensible. Navigation can also be a pain. Imagine a blind user Tabbing to the “Next Slide” button — which they must assume is working, since they cannot see the new slide advance in — and then having to navigate backwards to the beginning of the new slide. How do you know where the content of the new slide begins? How many times are you really going to rotate the carousel when there are this many button presses involved?
Lastly, those ubiquitous navigation dots that represent your active slide within the series are rarely accessible for low vision, blind, or color blind users, nor for users with motor impairments who rely on a keyboard. Often the visual variation between the light, “active” dot and the other inactive dots is impossible to distinguish without 20/20 vision, and since these are icons that are not Tab-able by default, they are rarely included in the focus order.
Just Tell Me How To Make It Accessible!
Okay, rude… but fine. We saw which scenarios make a carousel acceptable (useful, even), and we reviewed at length the pitfalls and arguments against it. If a carousel is still in the stars, then you can make it technically accessible. (Let’s call it “technically accessible” because if a component is not usable, it will never be fully accessible.)
The Container
When a screen reader encounters a carousel, it should give users the right expectation. There is no “carousel” HTML5 element, but a custom approach can achieve a similar result.
<section aria-label="carousel"><div role="group" aria-label="carousel">Either of the patterns above will cause a screen reader to announce the carousel as a distinctive part of the page. You could also make use of the more advanced aria-roledescription attribute to provide more information:
<section aria-label="Promotions" aria-roledescription="carousel">Rather than assigning the carousel a “region” or “group” role, the code above will give the component a more human-readable role: “carousel.” When a screen reader enters a carousel marked up as above, it will announce, “Promotions, carousel.” This is helpful even for blind users because the pattern implied by “carousel” will make sense both to internet-savvy users and to anyone who remembers the last time they puked on a playground.
The Contents
The grounding premise of universal design is to provide an equivalent experience for all users. In other words, if sighted users can only see one slide at a time, then screen reader users should have access to only one slide at a time. This means avoiding the visibility:hidden CSS property and opting instead for display:none or the HTML hidden attribute. If the carousel permits parts of other slides to be visible, then those inactive slides should be hidden from screen readers with aria-hidden="true" to avoid confusion.
Headings are vital to maintaining the organization of the page. Rather than considering the carousel to be a separate, parenthetical part of the page, it should be treated as part of the content flow. Use headings to denote the topic of each slide, and make sure the headings fit in with the hierarchy and structure of the page around it.
Wherever possible, limit the number of focusable elements to one CTA within each slide. If your CTAs are important then they should not be buried three slides deep in your carousel.
Advancing Slides
Usability research shows that auto-advancing slides deter users’ attention because they resemble advertisements. On top of that, it presents a barrier to users with low reading comprehension, it distracts users who have trouble with attention, and it can throw screen reader users for a loop. If it is an absolute imperative that slides advance of their own volition, then include a mechanism to pause or stop the movement. This is also a requirement under WCAG 2.0 Success Criterion 2.2.2 Pause, Stop, Hide (A).
When a new slide rolls into frame, use a live region to announce the ordinal number of the new slide and its topic. In the carousel demo below (available on GitHub), when a slide advances, a screen reader announces, “Slide [x] of 4,” followed by the title of the slide. This empowers screen reader users with a synopsis of the slide so that they don’t have to navigate to the top of the carousel on each new slide just for a glimpse at its contents.
Navigation
It is very common for carousel navigation controls to be inaccessible. In my experience, most make use of “nav dots,” as illustrated below. One obvious problem with this pattern can be discerned in the first and third examples, in which the active and inactive slide dots are distinguished only by their color. On other sites the states are even less distinct. Users with color blindness would not be able to use such a control. Keyboard users face a more significant barrier: often these dots are not included in the focus order and therefore cannot be used at all. And frequently they are not properly labeled so they are inaccessible to screen reader users.
As a rule of thumb, start with Next and Back buttons. This encourages a user to move through slides sequentially, which not only preserves their painstaking curation, but is a simpler experience for the user that requires less thought.
When using pagination buttons, or one button per slide, make sure they are included in the focus order and labeled in a way that makes sense to blind users. Let’s use common sense.
Summary
It is best not to use carousels, because they are often mistaken for advertisements and any content past slide 1 is almost never touched. Carousels may be useful and effective, but most often they are a relic necessitated by schizophrenic or indecisive content promotion. As marketing stunts, carousels fall victim to modern-day consumers’ awareness of their use in persuasion attempts. Carousels in general present potential pitfalls for users who rely on keyboards, screen reader users, and low vision and color blind users. Carousels that auto-advance especially impact users who have ADD/ADHD or learning disabilities that affect reading speed and comprehension. Make a carousel “technically accessible” by labeling its container, using headings within each slide, hiding offscreen slides from screen readers, and ensuring that navigational controls are labeled and focusable.