20% Off My Easy-Peasy Proposal with the Coupon Code 20OFF (Now - April 30th)

Accessibility Weekly

Slider Accessibility



Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 11

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

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …