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?
ARIA support
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 labels
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.
Focusable modules
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.
Tota11y
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.
Developer mode
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!
Interesting article Claire on using a plugin to fix accessibility defects, following on from your talk at WordCamp Edinburgh.
I wonder if the plugin authors approached the Divi theme authors to improve the accessibility before building the plugin. It would be interesting to hear the response from Divi if they did.
I’m not sure, Graham.
I might leave a message on the plugin forum and ask. It would be better to have a more accessible theme, right enough.
Yes, I agree with you Graham.
very interesting….i think it is very easy to handle…
Hi Claire, great article!
Have you found where one could add aria-label text to the Divi button module links and Image module links?
I’ve added in the image title and alt text where relevant, but that is specific to the image rather than the link. I’m wondering if there’s a CSS trick I can perform that I don’t know about… do you?
Hi Sara
As far as I know, the Divi Accessibility plugin doesn’t add aria-label to Divi buttons. I think in order to do that it would need to modify the Divi builder to give you the option of inputting the text.
Divi’s buttons aren’t marked up as true buttons 🙁 but as links with the
.et_pb_buttonclass.In theory, you could add your own custom class to the Divi button module and target it using JS or jQuery to then add the aria-label attribute and its content.
I just made an offer to build an accessible site, so this information is highly appreciated. I feard that I could not use Divi, but now I think it is possible.
We are having issues with screen readers not reading if the toggles or accordions are in expanded or collapsed states. For the non-sighted users how can we make this accessible for them? We have to get our site ADA compliant.
Hi L.R.
As you’ve discovered, the Divi Accessibility plugin only adds accordion/toggle support for sighted keyboard users.
I’ve tried accordions/toggles in other page builders and had the same issue. I have not been able to find a WordPress plugin that has the correct markup for screen reader users.
There are a few examples of accessible accordions on the Web. I’ve linked to a couple here: Accessible accordion examples.
Heydon Pickering’s Collapsible Sections also does the same thing.
Good luck!
I agree with Graham!
I noticed you mentioned that the Divi Accessibility plugin supports dropdown menus. However, I have a site with a dropdown menu and Divi Accessibility installed and I can see in the code that it’s not rendering. It is aria-expanded=”false” instead of true and there is no aria-selected. Do you have any insight as to how we can fix this please?
Hi Gila
I suggest you contact the plugin developer via GitHub: Divi Accessibility on GitHub
Interesting article on using a plugin to fix accessibility defects. great post.