Introduction
This is the All Access podcast Access & Allies. My name is Rowan; I’m the co-President and Director of Communications for All Access.
The goal of Access & Allies is to attempt to break down any digital accessibility topic under the sun to answer any and all of your questions around making digital tools more accessible. Thanks for tuning in, and if you prefer to read along, make sure to find this episode’s transcript in the notes — along with any resources I mention.
Now, let’s get started with today’s topic: The Thing About Carousels.
Topic Intro
You might have heard them called sliders or slideshows, but I like to call them carousels because why not?
Carousels are those things that usually show one image, ad, or shareable at a time and they tend to automatically swipe through different visuals. Sometimes these are just photos or graphics, other times they have text on an image. That right there should raise the red accessibility flag, or maybe blue accessibility flag? Either way, it should raise a flag because if you know digital accessibility, or you’ve heard me blather on about it before, you know text on an image can be trouble — then add it to an automatically playing slideshow. Right?
But I’m getting ahead of myself. Carousels are cool! They share bite-sized info at a time so you can get multiple messages across without overloading your site visitor. Not to mention they’re nifty to look at.
But. And you knew there was going to be but! Here’s the thing about carousels.
Carousels present numerous accessibility concerns. So what I’m going to do is break down carousel accessibility using pour, P-O-U-R. If you’ve listened to the podcast before you might remember that POUR stands for Perceivable, Operable, Understandable, and Robust. It’s a trusted method of measuring how accessible your digital content is, and we’re going to use it today. And then you can decide whether it’s something you want on your website! So let’s get started.
The Thing About Carousels: Perceivable
When it comes to perceivability, this first point might make you go “huh?” Carousels are too perceivable. That’s right, they are too good at being noticed. Here’s the thing: If you have an autoplaying slideshow or video on your site, people with executive functioning issues (and even folks who don’t have executive functioning disabilities!) are likely to be too distracted by the movement to digest the actual content on your site. From a first-hand point of view, I can’t tell you how many times I have zoned out clicking through carousels, or gotten frustrated because I couldn’t read them in time before they slid past to the next image. As funny as it sounds, it’s a common issue and it wastes peoples’ time.
Also in the perceivability column, carousels are notorious for hiding information from people regardless of their disability. They are designed to show one piece of content at a time. If the other content in the carousel is something you really want people to see, don’t risk them moving on before the content even shows up! For perceivability, carousels aren’t giving people added content, they’re giving them a barrier to accessing information.
The Thing About Carousels: Operable and Understandable
Let’s talk about operable and understandable as shared categories here, because there are two main points I want to address when it comes to carousel accessibility that span across operability and understandability.
The first is that carousels often lack clear buttons to move through the images, instead relying on low-opacity circles, arrows, or other icons on the images themselves. This can make it difficult for users to navigate the carousel at their own pace.
Additionally, automatically-timed transitions can make it challenging for users to understand how to control the carousel or access the content they want to see. This can be particularly difficult for folks with cognitive disabilities who may want extra time to process information or navigate through the carousel.
So again, the two big things in operable and understandable are unclear navigation and automatically timed transitions.
The Thing About Carousels: Robust
When it comes to the "R" in POUR, which stands for "robust," carousels can be problematic because they often rely on JavaScript or other technologies that may not be supported by all browsers or devices. This can result in a carousel that is inaccessible or unusable for certain users. Additionally, if the carousel is not programmed correctly, it may not be compatible with assistive technologies such as screen readers, making it difficult or impossible for some users to access the content. Or, get out of it, right? You want them to be able to move on from the carousel and access the rest of the page.
Some Suggestions
I have a few suggestions to remedy the issues with carousel perceivability:
- Make it clear that there is a carousel on the page
- Add clear buttons to move through the images, not just those low opacity circles people add on the carousel images themselves. Those little circles are the opposite of perceivable and often pose usability challenges for people with low vision and those who use assistive technology.
- Remove any automatically-timed transitions and leave the option to slide through in the hands of the user.
- The best carousel we’ve seen was one that allowed for tab-through navigation, but it’s important to make sure site visitors can get out of the loop just as easily as they can get in it.
These suggestions don’t necessarily remedy all the issues with carousels, but if this feature is a must-have for your site experience, then they are some recommendations to keep in mind.
Conclusion
Thanks for listening to this episode of Access & Allies: The Thing About Carousels. I encourage you to reach out through LinkedIn or email us at info@allaccess.dev if you have feedback.
It’s been fun talking at you and until next time on Access & Allies.
