Improving WordPress Divi Accessibility

UPDATED: 12/8/2024

According to BuiltWith, the Divi theme and page builder by Elegant Themes is used on over 2 million WordPress websites and is the 2^nd most popular theme in the United States. Unfortunately, Divi has some pretty significant accessibility issues out of the box. If you are trying to create a site that is WCAG-compliant, plan for a fair amount of custom development work.

Divi Theme Accessibility Issues

The default Divi theme has a number of significant accessibility issues that fail specific WCAG success criteria.

No Skip To Content Link

The Divi theme does not include a “Skip To Content” link that enables a keyboard-only or screen reader user to bypass the header of a page and go straight to the content area. This is a failure for SC 2.4.1 Bypass Blocks.

Zoom In/Out

The viewport meta tag in the Divi theme does not allow users on mobile devices to zoom in and out using standard gestures. This is a failure for WCAG 1.4.4 Resize Text.

Focus Indicators

The CSS in the Divi theme has removed the visible focus indicators which makes it hard for a keyboard-only user to know where they are on a page. This is a failure for SC 2.4.7 Focus Visible.

Drop-Down Menu

Drop-down menus in the Divi theme are only available via mouse-over. Keyboard-only users are not able to access these menus. If the parent of the drop-down menu has an href value, these items can be accessed with a keyboard, but frequently no value is defined. This is a failure for SC 2.1.1 Keyboard.

Mobile Navigation

The mechanism to open the mobile navigation menu is not accessible to keyboard-only users. Screen reader users may hear “clickable a” (read more about Divi icons) with no indicator of the item’s purpose. This is another failure for SC 2.1.1 and also SC 1.1.1 Non-text Content

Search Icon and Form

The search icon is not accessible by keyboard. Screen reader users may hear “clickable U” with no indicator of the item’s purpose. Additionally, the search form can be tabbed to while it is not visible on the screen and the input field does not have a label. These are failures for SC 2.1.1, SC 1.1.1, SC 2.4.11 Focus Not Obscured. For the lack of label, there’s some debate about which, if any, of the WCAG success criteria this is a failure for.

Icons

In the Divi theme, icons are typically applied via the CSS pseudo-elements :before and :after using icons fonts. For example, the code for the search icon is:

<span id="et_search_icon"></span>

and the corresponding CSS is

#et_search_icon:before {
    content: "\55";
    font-size: 17px;
    left: 0;
    position: absolute;
    top: -3px;
}

What get’s read to the screen reader is the symbol name, which in the case of the search icon is the capital letter U. This is confusing and not at all helpful. It is also a failure for SC 1.1.1.

Divi Page Builder Module Accessibility Issues

In addition to issues created by the Divi theme, many of the Divi Page Builder modules also have built-in accessibility issues.

Accordion – The controls for the accordion module are not keyboard accessible.
Audio – There is an aria-label of “Audio Player” but there’s no way to edit that. The time slider starting position is read as “midnight” to screen readers.
Blog – The “Read More” link doesn’t have an aria-label
Blurb – See Icon
Button – The button module has a series of issues:
- First of all, it’s a bit of a mis-nomer since the output is technically a link
- If no link value is provided, the code output should be <button></button> not <a></a>
- There’s no option to define an aria-label
- Icon symbol names are read to screen readers
Call To Action – See Button
Contact Form
- The labels are hidden by default
- Required fields are not indicated visually or programmatically
- Errors are not announced the screen reader
- Success message is not announced to the screen reader
Email Optin
- See Contact Form
- Error messages are not displayed visually or announced to the screen reader
Filterable Portfolio
- Nothing that explains what the filter links are for
- Pagination not wrapped in “<nav></nav>”
- There are no aria-label attributes to explain link purpose (i.e. go to page 2)
Gallery
- Button to close popup is read as “Times” to a screen reader
- Code does not include appropriate aria attributes
- Pagination not wrapped in “<nav></nav>”
- There are no aria-label attributes to explain link purpose (i.e. go to page 2)
Icon – The icon’s symbol name is read to screen readers, no way to apply aria-label or aria-hidden.
Map – The Pegman feature is not draggable
Person – Social media links do not have accessible labels
Post Slider
- See Button
- See Slider
Pricing Tables
- See Button
Slider
- Arrow controls do not have accessible labels
- Code does not include appropriate aria attributes
- See Button
Tabs
- Do not have proper aria attributes
- Can’t use arrows to move between tabs
Toggle – see Accordion

Motion and Animation

In addition to the theme and module-specific issues, Divi provides the ability to add animation for many of their modules. However, their standard CSS does not include any media queries to turn off the animation in cases where the user has enabled settings on their device to minimize motion and animation.

When videos are used as the background for a container, there is no way to pause or stop the video, which can be an issue for users who have conditions that are triggered by motion.

What Can You Do to Fix Divi Accessibility Issues?

So what can be done to address these issues and create a site using Divi that is accessible and WCAG-compliant? Unfortunately, there’s no easy solution. Making a Divi site accessible will require a combination of plugins, custom coding, and extensive testing along the way. It also involves finding alternatives to many of the built-in Divi tools. In many cases, it may be better to migrate to a different tool. If that is not an option, read on.

Divi Accessibility Plugin

When you search for solutions for Divi accessibility, the most commonly suggested solution is the Divi Accessibility Plugin. There’s conflicting information about whether or not this is still being maintained. The last update was made in October 2023. I have tried this on several occasions. While it did address some of the basic issues, it didn’t go far enough in some cases and created new issues in other cases.

Divi Accessibility Attributes and Accessibility Tweaks

There are relatively new plugins by Divi-Modules available through the Elegant Themes Marketplace called Accessibility Attributes and Accessibility Tweaks. I tested V1 of these plugins recently. There is some potential here but there are some significant issues that still need to be overcome before these plugins can be used to create WCAG-compliant sites. Divi-Modules’ founder does seem interested in continuing to make improvements to these tools. UPDATE: Version 1.1 provides a number of improvements including increased keyboard support for different menu styles and applying aria attributes to sub-elements in modules.

Divi Assistant

The Divi Assistant plugin from Pee-Aye Creative offers a full suite of adjustments and additional features for the Divi theme and modules. The do offer a number of Accessibility Helper settings including a Skip to Content link, focus indicator and the ability to add aria attributes to modules. UPDATE: Versions 1.3.4 and 1.3.5 incorporate changes based on feedback provided after the recent Accessibility Meetup.

Fix Divi A11y Plugin and Fix Divi A11y Modules

I’ve created my own set of plugins to address some of the most common issues on the sites I’ve worked on. Some of the functionality pulls from the Divi Accessibility Plugin but I’ve taken it a bit further as it relates to the navigation menus. The Fix Divi A11y Plugin is partially dependent on code changes that must be made to the header.php file.

Fix Divi A11y Plugin

Updates the viewport meta tag to enable zooming in and out
Adds a Skip to Content link, with custom color selection
Adds a focus indicator
Fixes the labels for the social media icons
Prevents tabbing to the search form when it’s not visible
Modifies the search icon and form to be more keyboard-accessible (requires changes to header.php)
Adds a media query for “prefers-reduced-animation” to remove animations
Makes mobile menu keyboard-accessible (requires changes to header.php)
Makes drop-down menus keyboard-accessible (requires changes to header.php)
Makes accordions, toggles and tabs keyboard-accessible

Fix Divi A11y Modules

Prevents icon from being read to the screen reader
Adds the ability to define an aria-label
Outputs <button></button> code if the link value is null or #

If you are interested in either of these plugins, you can down load them from GitHub: Fix Divi A11y repository and Fix Divi A11y Modules repository. You can also view the recent Accessibility Meetup where I discussed these plugins.

Custom Code

Not everything can be fixed with a plugin (blasphemy, I know!). I’ve put together a collection of custom code snippets to address certain problems. There will always be issues that are unique to each site that will need to be addressed on a case-by-case basis.

Disable Certain Modules and Use Alternatives

To prevent content authors from using modules that may introduce accessibility issues to your site, it’s best to disable certain modules and use accessible alternatives.

Accordions, Person, Tabs and Toggles – Use Fix Divi A11y plugin
Blog – use a custom loop instead to fully control the HTML output
Button and Icon – Use Fix Divi A11y Modules instead
Blurb, Call to Action and Pricing Tables – Create the same layouts using Fix Divi A11y Button
Contact Form and Email Optin – use a different form tool (ex. Gravity Forms or a custom MailChimp signup form)
Sliders and Gallery – use an alternative or reconsider the content – do you really need a carousel or can the content be presented in a more accessible way?

To disable modules, go to Divi -> Role Editor and Scroll to Module Use. Click “Disable” for each module that you want to turn off. You will need to do this for each of the 4 Admin levels.

You can create your own custom modules using Divi Plugins Divi Module Builder or use a block-based solution like KadenceWP Blocks.

Given all of the various ways you can configure Divi and all of the options for improving Divi accessibility, you will need to plan for extensive testing to find the best solution for your site.