Read time: 7 minutes
When we talk about carousels, we’re not talking about what you see at amusement parks and state fairs. What we’re talking about is a feature that is commonly used on the internet:
A way of displaying multiple images or content in a single space.
Although it’s unsure when carousels were first brought into web development and design, it’s been a commonly used feature throughout the web. It’s likely you’ve seen a website rely on a carousel, especially from websites that have a significant amount of content.
*coughs* any streaming service online right now *coughs*
Unfortunately, we’re not the biggest fans of carousels.
In fact, we speak a lot about how carousels have a negative impact on a website.
From our Ultimate Guide to Web Accessibility to simple discussions about content structure, we’ve mentioned numerous times that carousels are not great for a site’s level of accessibility.
With that said, we also want to acknowledge something:
We too rely on a carousel to help showcase some of our content.
Despite its clear and obvious flaws, carousels do provide web developers with a clever and unique way to showcase content. If done properly and with the right considerations in mind, it may be able to help elevate your content formatting and distribution.
These conflicting messages brought up a fair argument:
What exactly is so wrong with carousels? Is there a way for carousels to be more accessible and allow websites to properly utilize this helpful format?
Why carousels aren’t (usually) good
When was the last time you scrolled through a carousel? If so, when was the last time you fully scrolled through one?
One of the biggest reasons why people don’t like carousels is because of how inconvenient it is to find pertinent information or content. Forcing users to scroll through the carousel, while convenient for the website owner, is incredibly inconvenient for most users.
But there’s also an accessibility factor to consider with carousels.
For many people who rely on screen readers, keyboard navigation, or point-to-click tools, carousels can be an absolute nightmare. This is especially true when a carousel also houses important information, and it’s not uncommon for these users to completely leave the website in favor of a more accessible experience elsewhere.
Why?
There are a lot of factors that play into why carousels are inaccessible, but one of the big reasons is the amount of time that can be spent on the website.
For most users, it’s likely that they aren’t planning to stay on the page that houses the carousel for long. And even if they do, the chances are still low that those users will even scroll through the entire carousel.
In fact, a study done by Eric Runyon, Director of Web Communications at the University of Notre Dame, shows that only 1.07% of users interacted with carousel content, with 89.1% of engagement happening on the first slide.
Let’s look at it in a different way:
Think about your Netflix (or another streaming service) experience. How long are you clicking through the multitude of carousels trying to find the show you want to watch? How long does it take before you click the “search” feature?
Probably not too long, right?
Netflix is aware of how exhausting scrolling through their robust selection can be, and they even have a “random select” button that you can click if you’re really not interested in scrolling through their selection.
Now consider people with disabilities that do rely on assistive technology to navigate the internet. How long must it be to not only toggle through each selection and review the content highlighted but also move the carousel so that they can review the other options as well?
Wouldn’t it be frustrating knowing that a carousel is the only way to access some key information or content?
Whatever inconvenience you can imagine for able-bodied users using carousels, that is amplified for people who rely on assistive technology.
But even with all of that mentioned, the reality is that carousels are here to stay and continue to be used within web design. Even as more people become aware of the potential pitfalls in accessibility that come with using carousels, website designers and developers continue to add them to their websites.
Us included.
So, if we can’t avoid it, what can we do instead to make carousels more accessible?
Can you make a carousel accessible?
When we made the decision to add a carousel to our website, we knew we couldn’t use a typical design. Doing so would not only negatively impact the experience of our users, but it would also go against one of our core missions of making the internet a more accessible and inclusive experience.
So, how exactly did we make our carousel accessible?
Well, instead of reusing previous carousel designs, we opted to build ours from scratch. This ensured that its programming was built with accessibility in mind, making our process significantly easier.
We also included descriptive controls for screen readers, removed the auto-rotating features, and included a “page selection” feature that gave users another option to scroll through our content alongside the arrows.
We made sure to limit the number of the content we have to only four, as that helps our users limit the amount of scrolling they need to do when they are checking out our case studies. And on each piece of content, it is clearly labeled as a “case study” and the description for each case study is limited to one or two sentences.
We feel that if people do opt to use carousels, this is a great example of how to do so. We gave our users multiple options on how to use the carousel, limited the number of content people actually had to review, removed the “auto-rotate” feature, and kept any written content on each case study to a minimum.
Does a carousel make sense for your website?
That all depends on your content needs. Despite having a carousel on our own website, we still recommend that most websites avoid using one.
With that said, the sites that are best equipped to use a carousel are sites that house a lot of content. Whether you have a number of blogs, podcasts, music, or case studies, those are generally good pieces of content to use for a carousel.
We recommend that you avoid placing important pieces of content – contact info, service options, business values, testimonials – away from your carousel.
Forcing users to read that content via a carousel can be incredibly frustrating for them, and what could have been a moment to create a new fan may turn into a disgruntled user that will look elsewhere for what they need…instead of looking to you.
And do you think a carousel is really worth that?
Looking for more tips on how to better structure your website?
Have a few ideas on how to present your content, but not quite sure if it’s the right approach?
Make sure to sign up for our Unity Insights newsletter! Every two weeks, we provide you with tips on how you can better set up your website for success, both in web accessibility and user experience. Plus, you’ll be the first to know of every new release of our brand new podcast:
Learn more on why the Unity Insights newsletter might make sense for your morning routine at the “Unity Insights” link below! Unity Insights Newsletter
