Are you working to make an Elementor website accessible? This tutorial will show you how to add pause buttons to Elementor sliders and carousels that auto-play. Adding pause buttons will improve the accessibility of your Elementor slides and make them pass Web Content Accessibility Guidelines (WCAG) 2.2.2 Pause, Stop, Hide.
Background on Elementor Accessibility
Elementor is a page builder used by more than 10 million WordPress websites worldwide. It makes it easy for less technical people to create complex page designs, which is a big reason for Elementor’s popularity among WordPress DIYers, designers, and marketing agencies.
During our Global Accessibility Awareness Day WordPress Accessibility Showcase, Miram Schwab, Head of WordPress Relations at Elementor, shared that Elementor is committed to prioritizing accessibility in every release. However, because of the size and age of their code base, making Elementor fully WCAG 2.1 AA (or WCAG 2.2) compliant is not an overnight process for their team.
We previously discussed that it is possible to build accessible websites with Elementor, but you need to be thoughtful about how you build pages and which components you use.
Why Add Pause Buttons to Sliders in Elementor
Elementor sliders and carousels are examples of components that can add accessibility problems to websites, especially if they are set to auto-play.
Problems with auto-playing content
Auto-playing or animated elements, including sliders, carousels, videos, and animated GIFs can cause a number of accessibility problems, such as:
- Moving too fast for some people to read the content on the slide.
- Causing people with motion sickness to feel dizzy or nauseous.
- Confusing screen reader users if the screen reader announces slide content changes even when the user is somewhere else on the page, outside of the carousel.
- Distracting users with ADD or reading disabilities from being able to read other content on the page.
For these reasons, you should think carefully before adding anything that auto-plays to your website. If you do decide to add animations or auto-playing content to your website, there must be a way for the user to stop the movement.
Accessibility laws require pause buttons
Many websites worldwide are required to be accessible. This includes websites for businesses, nonprofits, educational institutions, and government entities.
Most of these laws require websites to conform to Web Content Accessibility Guidelines to measure accessibility and legal compliance. Some examples of laws that require websites to meet WCAG 2.1 AA accessibility include:
- the Americans with Disabilities Act (ADA) in the United States
- the European Accessibility Act
- the Accessibility for Ontarians with Disabilities Act (AODA) and Accessibility for Manitobans Act (AMA) in Canada
- the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations in the United Kingdom
WCAG 2 has a success criterion that requires a pause button on anything that auto-plays for more than 5 seconds. Without a pause button, auto-playing content on your website will not be legally compliant because it will fail WCAG 2.2.2 Pause, Stop, Hide.
WCAG 2.2.2 Pause, Stop, Hide (Level A)
The 2.2.2 Pause Stop Hide success criterion requires that:
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.
“Essential” is defined as functionality that, if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform.
Auto-playing on sliders is not essential; thus, if you have a slider in Elementor that is set to auto-play, it will fail this success criterion because Elementor sliders do not have pause buttons.
Options for making Elementor Sliders Pass Success Criterion 2.2.2
If you want to make your Elementor sliders pass WCAG 2.2.2 Pause, Stop, Hide, you have two options:
- Turn off autoplay in Slider Options found under the Content tab in the Elementor Slides widget:
- Or, you can add your own pause button with JavaScript.
Article continued below.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
How to Add Pause Buttons to Elementor Sliders
We recently remediated an Elementor slider for improved accessibility on one of our Accessibility Audit & Remediation Plan client websites. They wanted to keep their slider set to autoplay, so our CTO, Steve, wrote JavaScript to add the pause button.
Here’s the code he used and instructions on how you can add this to your own website.
1. Add JavaScript to insert an accessible pause button
Insert the following JavaScript code into a new or existing JavaScript file that loads in the <head> of your child theme. If you are unsure how to edit your child theme, you can add the code using a code snippets plugin (instructions below).
This code will find all Elementor Slides widgets and add a pause button as the first focusable element in the Slides container with the following accessibility features:
- The button has a consistent aria-label “Pause Slider,” though the visible text toggles between “pause” and “resume.” This helps to avoid confusion for screen reader users that can occur if a button’s name changes.
- The button uses the aria-pressed attribute to indicate if it is toggled on or off.
- The button uses the aria-controls attribute to connect it to the slider.
When you add this JavaScript to your website, the button will appear at the top left of the slider and will adopt the default button styles for your website.
The next step is to style the button.
2. Style and position button with CSS
Now that you have the pause button on the page, you may want to adjust its position or colors to fit better on your website. You can do this by adding CSS to your child theme or in the Custom CSS field on the Advanced tab on your Elementor Slides widget.
For example, you can move your pause button to the bottom right corner of the slider:
This is the CSS to reposition the pause button (update the button ID to match your button ID):
You can get as fancy with the styles as you want, including replacing the visible button text with pause and play icons as, as we did on the slider for our client.
3. Turn off pause on hover and interaction
When autoplay is turned on in Elementor Slides, two pausing options are available in Slider Options: pause on hover and pause on interaction.
Important: you must turn these settings off to ensure the functionality of your pause button. Turning these on will cause the slider to begin replaying if a user mouses over the slider and then off of it, even after they have paused it using the pause button.
These settings are not compatible with a dedicated pause button.
Putting It All Together
Here’s a quick video that shows you how you can quickly add a pause button to your Elementor slides without editing your WordPress theme. In this tutorial, I use the free WPCode – Insert Headers and Footers plugin and custom CSS field in Elementor to make all my changes.
Amber: This is a quick video to show you how you can add a pause button to your Elementor slides widgets when they are auto playing to ensure that they pass WCAG 2. 2. 2 pause, stop, hide. So when we go into Elementor, we can see that I have the slides widget, I have autoplay, and I have two options right now, pause on hover, pause on interaction.
I don’t have any way to add the pause button, which is a requirement by Web Content Accessibility Guidelines, which means it is a legal requirement to have the pause button. What you can do first, I’m going to do this in a no code kind of way, I’m not going to edit a theme. So if you are a developer, you can edit your child theme and add the JavaScript there.
I’m actually going to use this plugin called WPCode, which used to be called Insert Headers and Footers to add some custom code. So I have installed and activated it on my website. And then I’m going to go over to my code snippets and I’m going to hit add new. And then I’m just going to click this, add your custom code, new snippet.
Then I’m going to give it a title. So I’m just going to say, add pause button to Elementor slides. Then I’m going to grab my JavaScript, which you’re going to be able to get right out of this blog post. And I’m going to paste that in. I need to change my code type. It’s not HTML. It is JavaScript snippet.
So I’m going to change that. That got rid of all the errors that I had and then added the script tag up there at the top. I am then going to scroll down. I’m going to leave auto insert, site wide header, just the way it is. I want it to be on any device because we want that everywhere. No conditional logic, so you don’t need any other settings here.
So then I’m going to go ahead and save the snippet. That’s going to save it, but it’s not actually going to output it on the front end of the site until I toggle it on. So right now it says inactive, I’m going to toggle that to active and hit update. Now if I go back to view my slider on the front end and I do refresh, I have a pause button.
The pause button is in that top left corner, but it’s above the slider. We might want to position it a little differently. A lot of times we position that in the bottom right. so we can do that with CSS. What I’m going to do, actually, you could add this into your global CSS using Elementor or you could add it just on the block or if you had a theme with the child theme you could add it to your stylesheet for your child theme.
I’m going to just for demonstration purposes add it into the block. I’m going to refresh my editor so I get my pause button here in the editor. So now I can see it’s loading in the editor too. I could even test it so I can see my slider should be going. If I hit pause,
And I just, wait a minute, see that my slider has stopped. We can see here that it’s working. I want to reposition this. I’m going to go down, edit my slides, go to advanced, custom CSS, and then I’m just going to put in some CSS. One thing I need to be aware of, oh, do you see how it’s still moving?
Why is it still moving even though it says it’s paused? It’s still moving because I put my mouse over it and I have back on the content tab slider options. I have this “pause on hover,” “pause on interaction” that is going to it will yes pause it when you hover it but when you leave it’s going to tell it to restart again which will break your pause button. So we are going to make sure we turn those off.
Now I’m going to reposition that button going back to the advanced CSS. On the front end, I’m going to right click on the button, click inspect. And I’m going to get the ID for the button, so right there, pause-button-0. And if I go back here to selector, if I type it right, pause-button-0. I’m going to say position absolute. Now it looks like it’s disappeared, but I just need to tell it where to go. We’re going to say bottom five pixels. Right Five pixels and give it a Z index. Now it is over the bottom. I’m going to update this
and then go back to my front end. I will refresh so I can see my styles, the pause button, and I can tab to it. I’m up here in the admin bar right now. If I hit tab, then I go to the pause button, then I go to other elements on the slides, which I haven’t fixed yet for better accessibility, but we can see that we can go to the different elements of the slide, but the pause button is the first focusable element.
It is a button so I can use my space bar to trigger it. Pause. We’ll just wait for a couple seconds.
So it is paused, it’s not playing. And you can see if I resume it, then it will resume playing and it functions. And if we inspect, we can see that it has all of the appropriate code that we expect. So my ARIA label stays the same pause slider. And we’ve got ARIA press equals true telling us whether or not it is. And that changes to false when we unpause it so we can see that it’s fully functioning the way we would expect both for a sighted user and a screen reader user.
And that’s a quick and easy way to improve accessibility in your Elementor slides.
Adding a pause button to autoplay carousels is a quick and easy way to improve accessibility on an Elementor website.
Did you find this tutorial helpful? Join our email list to get more accessibility resources and webinar invitations in your inbox.
