How to Vastly Improve the Accessibility of the Divi Slider Module

Out of the box, the Divi Slider Module has many gross accessibility violations. The keyboard control is poor because you can’t see what you’re selecting as you’re tabbing through the navigation controls. And, the dot and arrow navigation symbol contrast can be bad.

For an example of an accessible slider, check out W3C’s demo.

In this article, I’ll provide some CSS that, along with the Divi Accessibility plugin, will vastly improve the accessibility of the Divi Slider Module navigation controls. The one thing missing is a start/stop button, which is needed if you have automatic slide animation turned on.

Of course, there’s the necessary disclaimer that using this CSS will not necessarily make your slider 100% accessibility compliant. In fact, I’m pretty sure it won’t. But, it will go a long way to making it more usable for people with and without disabilities.

The Goals

The goal is to do the following:

• Increase the contrast of the slider navigation arrows and dots, both for light and dark cases.
• Change the size of the dot for the current slide so it’s more apparent what slide you’re on (other than just by color).
• Make each navigation arrow pop out when landing on it using the tab key.
• Add an outline to the dot that you have navigated to using the tab key.

The Divi Accessibility Plugin

In order for the tab key navigation features to work, you’ll need to install the Divi Accessibility plugin on your site. This is a fantastic free plugin that you can download on Github.

The CSS

Here’s the CSS to your child theme or directly in the customizer:

/* IMPROVE THE ACCESSIBILITY OF THE DIVI SLIDER MODULE
   https://brianshim.com/webtricks/divi-slider-nav-dots-contrast */
/* IMPROVE THE CONTRAST OF THE SLIDER DOTS */
.et_pb_slider .et-pb-controllers {
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	text-align: center;
	z-index: 10;
	padding-top: 10px;
	height: 28px;
	padding: 10px 15px 0;
        border-radius: 14px;
}
.et_pb_slider.et_pb_bg_layout_light .et-pb-controllers {
	background-color: #fff;
}
.et_pb_slider.et_pb_bg_layout_dark .et-pb-controllers {
	background-color: #000;
}
.et_pb_slider.et_pb_bg_layout_dark  .et-pb-controllers a {
	background-color: #fff;
}

/* MAKE DARK ON WHITE DOTS DARKER */
.et_pb_bg_layout_light .et-pb-controllers a {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
}

/* MAKE CURRENT DOT LARGER */
.et_pb_slider .et-pb-controllers a.et-pb-active-control {
	width: 11px;
  height: 11px;
  transform: translateY(-2px);
}

/* ADD FAT SQUARE AROUND KEYBOARD-SELECTED NAV DOT (REQUIRES DIVI ACCESSIBILITY PLUGIN) */
.et_pb_slider .et-pb-controllers a.keyboard-outline  {
	opacity: 1;
	outline-width: 3px !important;
	border-radius: 0;
}
.et_pb_slider.et_pb_bg_layout_dark .et-pb-controllers a.keyboard-outline {
	outline-color: white;
}
.et_pb_slider.et_pb_bg_layout_light .et-pb-controllers a.keyboard-outline {
	outline-color: black;
}

/* GET RID OF UNDERLINED ARROWS (CAUSED BY DIVI ACCESSIBILITY PLUGIN) */
#main-content .et_pb_slider .et-pb-arrow-prev,
#main-content .et_pb_slider .et-pb-arrow-next {
    text-decoration: none !important;
}
/* MAKE NAV ARROWS VISIBLE USING TAB KEY */
.et-pb-arrow-next.keyboard-outline {
       opacity: 1;
       right: 22px;
}
.et-pb-arrow-prev.keyboard-outline {
       opacity: 1;
       left: 22px;
}
/* ADD BOX BEHIND ARROWS */
.et_pb_slider.et_pb_bg_layout_dark .et-pb-arrow-next:before,
.et_pb_slider.et_pb_bg_layout_dark .et-pb-arrow-prev:before {
	background-color:black;
}
.et_pb_slider.et_pb_bg_layout_light .et-pb-arrow-next:before,
.et_pb_slider.et_pb_bg_layout_light .et-pb-arrow-prev:before {
	background-color:white;
}

The beauty of this is that it will add the appropriate background color based on your light/dark text setting in Design -> Text -> Text Color of the slide. If you set this to Dark, it will make the background box white, and vice-versa. Here’s an example showing the white background box with Text Color set to Dark:

So, it should work for all of your Divi Slider slides!

Did it work for you? Please leave a comment or question below! – Brian

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA who uses WordPress, PHP, and JavaScript to create websites and web applications for businesses, nonprofits, and organizations.

brianshim.com