Slider Accessibility

Despite our attempts to persuade them that website users don’t interact with sliders, clients frequently want sliders and carousels on their websites, and, invariably, they make it into final designs.

Sliders or carousels require a lot of forethought when it comes to accessibility. Unfortunately, most slider plugins and page builder slider widgets miss the mark, so it’s important to test sliders on the website you build for accessibility.

Testing Sliders for Accessibility

Automated testing tools like the Equalize Digital Accessibility Checker WordPress plugin will be able to find some accessibility problems with carousels or sliders for you. A common problem in sliders, which is easy for automated accessibility checkers to find, is if the controls to advance the slider don’t have an accessible name and are empty buttons.

Manual Testing is Important

There are many problems with sliders that an automated tool cannot find. For example, it’s easy to tell if the “next slide” button is empty, but it’s much harder for an automated tool to tell if the “next slide” button is not focusable because it’s coded wrong (as a <div> rather than a <button>). This is harder, because, the automated tool doesn’t know if there’s even supposed to be a “next slide” button at all.

For this reason, it’s important to manually test sliders for accessibility both with a screen reader and by using a keyboard alone.

How to Manually Test for Slider Accessibility

To test sliders for accessibility, view the slider on the front end of the website and…

1. Visually observe the slider’s appearance, taking note of things like the color contrast of any text that appears on the slide, whether autoplay and any other animations are present, and the speed of slide transitions.
2. Use your Tab key to navigate to all interactive elements (previous and next buttons, dot navigation, links in the slides) and ensure that you can: (1) get to them, (2) see a focus outline, and (3) trigger them with your Return/Enter key and Space Bar.
3. Use a screen reader such as VoiceOver and NVDA to listen to the slider, ensuring that everything is labeled properly, the images have correct alternative text, and sliders that automatically transition don’t interrupt the screen reader if the user is listening to something lower down on the page.

There is a detailed checklist for slider accessibility in the Accessibility Checker documentation.

Accessible Slider Plugin for WordPress

If you’re looking for a slider plugin for WordPress, you can use the testing techniques above to test the plugin’s demo and determine if the plugin you’re looking at is accessible (or if it’s a close enough start).

In my agency, we custom-code our sliders with a modified version of Slick.js. I tested the demos for several plugins while writing this post to see what off-the-shelf options are available. Happily, several plugins will give you a decent starting point with minimal modifications required.

Here are some sliders worth exploring further that had demos that passed basic accessibility tests.

• Kadence Blocks Advanced Gallery: This is a good option with no noted accessibility problems, that can make a simple image carousel.
• Smart Slider 3: This sounds and looks good, except that they are blocking the focus outline in the slider CSS – if you remove or override the focus outline, that’s easily fixed.
• MetaSlider: MetaSlider has controls that are coded as buttons and function well with assistive technology, but could be improved with more accessible names – I.e., “next” and “1” could more clearly be labeled as “next slide” and “slide 1 of 3”.

If you’re building websites with Beaver Builder, Elementor, or Divi, avoid using the sliders built into those plugins. They all had significant accessibility problems identified during testing.

Is there another slider or carousel plugin you have been using that works well for accessibility? Share it in the comments!

Additional Resources

• W3C Carousels Tutorial
• A Step-By-Step Guide To Building Accessible Carousels
• Auto-Rotating Image Carousel with Tabs for Slide Control Example