• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / Accessibility / Improve Your Divi Website’s Reach With Divi Accessibility

Improve Your Divi Website’s Reach With Divi Accessibility

Posted: September 11, 2017 Updated: May 19, 2020 by Claire Brotherton
15 Comments

Divi Accessibility

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.

Divi Accessibility

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.

ARIA added to the Divi Tab module by Divi Accessibility
ARIA added to the Divi Tab module by Divi Accessibility

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.

Divi Accessibility enables keyboard accessible submenus
Divi Accessibility enables keyboard accessible submenus

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.

Divi Accessibility accordion, showing keyboard focus
Divi Accessibility accordion, showing keyboard focus

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.

Divi Accessibility keyboard navigation outline colour picker

The outline helps sighted keyboard users see where they are within pages when they use the Tab key to travel through.

Divi Accessibility blue focus style

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.

Divi Email Optin module

Without Divi Accessibility, the form label is set to display: none;

Form label set not to display

With Divi Accessibility, screen reader text is used instead:

The form label can be read by screen readers

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.

Divi Accessibility Skip to content link

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.

The Tota11y tool shows problems with Divi heading levels
The Tota11y tool shows problems with Divi heading levels

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!

Related

Category: Accessibility, WordPress Tags: Divi, Tota11y

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Graham Armfield says

    September 11, 2017 at 1:15 pm

    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.

    Reply
    • Claire Brotherton says

      September 11, 2017 at 4:16 pm

      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.

      Reply
    • Raj Purohit says

      April 23, 2019 at 10:59 am

      Yes, I agree with you Graham.

      Reply
  2. Sneha Giridhar says

    October 23, 2017 at 11:23 am

    very interesting….i think it is very easy to handle…

    Reply
  3. Sara says

    January 5, 2018 at 1:09 pm

    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?

    Reply
    • Claire Brotherton says

      January 8, 2018 at 4:03 pm

      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_button class.

      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.

      Reply
  4. Johan Linder says

    October 20, 2018 at 6:41 am

    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.

    Reply
  5. L.R. says

    February 11, 2020 at 4:43 pm

    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.

    Reply
    • Claire Brotherton says

      February 12, 2020 at 9:16 am

      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!

      Reply
  6. John Lawson says

    March 16, 2021 at 3:25 pm

    I agree with Graham!

    Reply
  7. Gila says

    October 25, 2021 at 8:06 pm

    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?

    Reply
    • Claire Brotherton says

      November 8, 2021 at 1:42 pm

      Hi Gila

      I suggest you contact the plugin developer via GitHub: Divi Accessibility on GitHub

      Reply
  8. kevin D says

    April 28, 2023 at 11:39 am

    Interesting article on using a plugin to fix accessibility defects. great post.

    Reply

Trackbacks

  1. Is WordPress Reykjavik Theme Clean, Light And Accessible? | World of WordPress says:
    October 27, 2019 at 1:11 pm

    […] theme is quite a small download; the zip file is 1.1MB in size. Compare that with Divi theme which is […]

    Reply
  2. Divi is versatile and accessible, making it an easy Wordpress theme choice says:
    January 14, 2020 at 8:40 pm

    […] for site visitors with disabilities. This information was curated from the article “Improve Your Divi Website’s Reach With Divi Accessibility” written by Claire Brotherton for the website, A Clear Bright […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map