Build Better Carousels: Accessibility First

Yesterday, Tuesday, July 30, was the HighEdWeb Accessibility Summit. I attended a poster session titled "Designing, developing, and testing accessible web carousels," presented by Michael Bolton from Carnegie and Alayna Setterlind from Carnegie Higher Ed. It was one of the first presentations I’ve seen that shared techniques for making carousels accessible. Carousels (or content sliders) are notorious for not being accessible.

I thought I would combine the techniques learned at the Accessibility Summit with a few others and share them in this blog post.

A carousel or content slider is a content display design that presents a series of related content slides in a horizontally scrolling format. I will use the term carousel for this blog.

Most carousels have directional arrows on the left and right of the content slide. Some also provide previews of the upcoming images located beneath the slider.

Elements of common content slider with navigation. Courtesy of Research Gate

Some carousels use progress dots as navigational indicators. These are more commonly found in the mobile version of a carousel but help provide a focus indicator for the current slide.
Five dots, the first two are not filled, the third one is filled and the last two are not filled. Beneath the 5 dots are the words Carousel controls.
Image courtesy of A Step-By-Step Guide To Building Accessible Carousels

Common Accessibility Issues with Carousels

Autoplay

A carousel set to autoplay can make it difficult for people with attention deficit disorder, dyslexia, or specific learning disabilities to focus on and/or read the content. Not everyone can read and understand content that is only visible for 15-20 seconds. Everyone consumes content at different speeds.

To give people a better chance of interacting with a carousel, add a "Pause" or "Stop" button to cease the automatic cycling of content slides. Make the pause button large, conspicuous, and with proper contrast.

Also, when a content slide receives focus or hover, the cycling of the content slides should also be paused. See 2.2.2: Pause, Stop, Hide (Level A)

Screen Readers

Screen reader users often don't know when they've entered or exited a carousel, making it difficult for them to even discover the carousel's content, let alone interact with it.

For screen reader users to interact with your carousel, provide a 'meaningful structure and semantics' and use semantic markup for different sections, controls, and content, along with proper labeling for good orientation.

For more specific information and code snippets on accomplishing this, please read "A Step-By-Step Guide To Building Accessible Carousels: Structure, Semantics and Labeling."

Keyboard Accessibility

To ensure your carousel is accessible to all, the controls must be operable by keyboard-only users. Users shouldn't need a mouse to navigate between slides, pause the carousel, or select specific slides.

Using the native HTML button element <button> for all carousel controls—the "Previous," "Next," and "Pause" buttons, as well as any slide picker options, will provide clear visual cues and ensure proper interaction with assistive technologies like screen readers.

All controls, including directional buttons, should be large, conspicuous, and have proper contrast for easy visibility and navigation.

Contrast, Focus, and Target Size

Proper Color Contrast
Ensure proper color contrast between background and foreground for all carousel controls. Remember that placing controls on top of an image can make proper color contrast challenging. It's recommended that you place all carousel controls outside of the slides. See SC 1.4.3: Contrast (Minimum) (Level AA).
Focus and Progress Indicators
Clear, visible focus indicators help keyboard users know that the carousel is an interactive page element and provide visual cues that inform them precisely what slide they are currently on. Proper color contrast between focused and non-focused states is critical.

Progress indicators like dots or specific slide indicators, for example, presenting "Slide 2 of 6" in text below the carousel, can be used with focus indicators to provide information to the user. Color contrast is also significant here. In addition, when using progress dots, do not use color alone as the indicator. The best practice is to use filled and not filled dots. For example -
Target Size
Ensure your carousel controls (buttons, links, progress indicators) meet the minimum size recommended by the W3C or have sufficient spacing around them. Proper sizing prevents accidentally activating an adjacent target, making the carousel more user-friendly for people with motor impairments and mobile devices.

Buttons, links, and progress indicators should be positioned for easy access and adaptability across various devices. See SC 2.5.8: Target Size (Minimum) (Level AA)

ALT Text and Captions

Creating an accessible carousel can be quite an undertaking; sometimes, the low-hanging fruit, like ALT text, may fall to the side. Using proper ALT text, or captioning, for all the images in your carousel is critical. Screen reader users rely on that information to provide a more inclusive experience.

Additional Considerations

Not all of your users will want to interact with your carousel, especially keyboard-only users, who may not want to “spacebar” through all the images, and screen reader users, who may have conflicting settings on their devices. To give users a choice, provide a “skip link” that can appear on keyboard focus and be read by a screen reader. Have the link go to the next interactive element after the carousel.

Be consistent in your carousel design. Different carousels with different designs, controls, and functionality can confuse any user. Test all your accessible designs with real users of all abilities, find the one that works best for them, and stick with it.

Creating accessible web carousels is undoubtedly a time-consuming and labor-intensive process. It requires a deep understanding of accessibility standards, careful planning, and meticulous attention to detail.

While it may seem challenging, the positive impact on user experience and brand reputation makes it well worth it.