Updated 19 May 2020.
Please note that as of 12 May 2020 the Divi Accessibility plugin is no longer available to download on WordPress.org. According to Ronnie Burt of CampusPress, the reason was:
There was apparently a complaint about the name of the plugin to WordPress.org as it started with the word Divi, and we have closed the plugin from our account there to avoid further problems.
The plugin is has not been discontinued, though – it’s moved to a new home. Download the latest version of Divi Accessibility on GitHub.
Divi theme and accessibility
Divi by Elegant Themes is a versatile and widely used theme with a powerful page builder.
In a list of top themes compiled by WordPress Theme Detector, Divi ranks #2 in popularity.
I’ve used Divi for a few projects. One thing that has always bothered me about using Divi theme, however, is accessibility. It’s not coded with the needs of disabled users in mind. As a result, some content created using Divi is not as accessible as it could be.
Introducing Divi Accessibility
Thanks to an article on WordPress accessibility published by Speckyboy, I came across the Divi Accessibility plugin.
The plugin, by CampusPress and Joseph Fusco, helps to overcome some of the theme’s shortcomings.
How does Divi Accessibility make Divi more accessible?
Divi Accessibility’s settings page (Divi > Accessibility) contains a number of options. Most of these are on by default.
What do they do?
Add appropriate ARIA attributes across Divi elements & modules.
Here is an example. Divi Accessibility has added ARIA code to the Tab module.
This makes it more accessible to screen reader users. They are told that they have reached a tab panel and that the active tab (Design) is both selected and expanded.
Dropdown keyboard navigation
Allow easier navigation of Divi dropdown menus with the keyboard.
This is a very important feature.
The next time you visit a Divi site, try using the Tab key to navigate the menu. You’ll find that any submenu items in dropdown menus are skipped over.
This could be an issue if the pages aren’t navigable in some other way.
If your business website has a top-level menu item Services and your list of services are submenu items underneath, you don’t want people unable to access them. Otherwise, you could be missing out on sales!
Here’s how the menu looks with Divi Accessibility active. There are no problems reaching the submenu pages in Our Team with the keyboard.
Fix missing labels & incorrect or missing assignments to their corresponding inputs.
From what I can tell, Divi actually seems to mark up form labels correctly with their fields.
The main problem is that Divi hides the form labels. The screen reader text option below helps do this in a better way.
I’ve noticed too that the Contact Form Module now allows you to add other elements. You can now create radio buttons, checkboxes and dropdowns for your forms. These don’t seem to have accessible markup as yet.
Allow Divi modules such as Toggle & Accordion to be focusable with keyboard navigation. Hitting enter will open/close when focused.
The standard Divi toggles and accordions can’t be operated by keyboard-only or screen reader users. They are simply skipped over when the page is navigated. This is bad if the hidden content contains important information.
The plugin adds the appropriate code to make them focusable (behave as they would for a mouse user). Using the Enter key toggles between the opened and closed state.
Keyboard navigation outline
Add an outline to focused elements when navigation with the keyboard.
You can set the outline colour with the colour picker. The default colour is a blue.
The outline helps sighted keyboard users see where they are within pages when they use the Tab key to travel through.
Without the outline, it’s very hard to tell where you are.
Screen reader text
Add plugin screen reader class used on certain labels & reverses Divi incorrectly applying
display: none;on its own screen reader classes.
Divi Accessibility overrides the display: none style and properly applies the screen-reader-text class.
This is an email optin module. The form field labels are hidden – the text you can see for each field is placeholder text.
Without Divi Accessibility, the form label is set to display: none;
With Divi Accessibility, screen reader text is used instead:
Skip navigation link
Allow user to skip over Divi navigation when using keyboard and go straight to content. (Requires screen reader text option to be on).
Some other themes have skip links built in, notably Genesis.
Imagine you have a severe visual impairment and need web pages read to you. How much easier your life would be if you didn’t have to listen to the navigation read out to you every time you went to a new page. If you could jump straight to the content. That’s what this option does.
The link is visible so that sighted keyboard users can use it too.
For pages with a sidebar, it would be useful to have a Skip to sidebar link too.
Add a small button to the bottom corner of site to visualize how your site performs with assistive technology. (Admin users only).
This adds the Tota11y tool to your site which can help highlight more accessibility errors. Only logged in site administrators can see it.
For more information on how Tota11y works, read wA11y – The Web Accessibility Toolbox WordPress Plugin. (You can use this plugin with any WordPress theme.)
One issue with Divi which Tota11y highlights is inconsistency in headings for modules. For example, Blurb modules have h4 headings regardless of what heading level came before.
Log plugin info to console. (Admin users only).
Divi Accessibility verdict
Divi Accessibility does a good job of remedying some of the deficiencies of the Divi theme. It won’t fix everything, but it’s a great start.
It’s a really simple install. Add Divi Accessibility and in 2 minutes you will have a more accessible Divi site.
Developers are welcome to contribute to the plugin visit the Divi Accessibility page on GitHub.
Update: the developer’s comments
As Graham pointed out in the comments, it would be better if the theme developers made Divi more accessible in the first place. I corresponded with developer Joseph Fusco about this, and here’s what he said:
Yes I have approached Elegant Themes about the issue in their forums. More specifically about a few items that were causing issues for users in regards to screen readers. When asked on a time frame, support told me it wouldn’t be quick but added it to their queue as they have a lot more important things to take care of, which is understandable, but still frustrating.
After we released the plugin we did share it with elegant themes, but we never got a response back. I agree it would make the most sense to have them adopt the changes the plugin makes, but they just have different priorities at the moment. In the meantime I’m glad people are using the plugin! If you have any requests or issues with the plugin, feel free to let us know!