Use KadenceWP Blocks with Divi for Accessibility
I’m not comparing the pros and cons of Divi vs. KadenceWP to build websites, that’s been done. My personal preference is to build sites using KadenceWP because it provides better accessibility, page speed and flexibility than Divi. Instead, this post is about using KadenceWP Blocks within a Divi theme to compensate for many accessibility issues with Divi Page Builder Modules.
Why Use KadenceWP Blocks Within A Divi Theme
The inspiration for this was a recent Facebook post by someone who mentioned they were using KadenceWP Blocks in a site built with Divi. At first, the idea of using these two tools together didn’t make any sense to me. But after a little thought and testing, I realized this combination can be a workable solution to address some specific needs.
The Divi theme and Page Builder modules have some very distinct accessibility issues. I created the Fix Divi A11y plugin to address issues within the Divi theme, including inaccessible navigation, missing focus indicators and missing Skip to Content links. This plugin can be added to a site with a small amount of effort by a web developer, mostly to create a child theme and update the header template file. However, many of the page builder modules also have accessibility issues that need to be addressed on a page-by-page basis.
Understanding that many organizations may not have the budget to rebuild their whole site using a different set of tools to achieve accessibility, incorporating KadenceWP Blocks to replace Divi Page Builder Modules can help keep costs down. Content authors who are comfortable using Divi Page Builder tools will find it easy to learn how to accomplish the same page layouts with KadenceWP Blocks. Pages containing problematic Divi Page Builder Modules can be rebuilt using KadenceWP Blocks and then, over time, other pages can be converted as time allows.
The standard KadenceWP Block plugin is free. This should be sufficient for many sites. More complex sites can upgrade to the Pro version for $89/yr (as of December 2024) to get access to more advanced blocks and functionality.
In a number of cases, KadenceWP Blocks provide more options for styling and advanced settings than their Divi Module counterparts.
- Row/Section: KadenceWP has the ability to add colored overlays with transparency to background images that are applied to row and section blocks, providing the ability to increase color contrast between background images and text.
- Accordion: The KadenceWP accordion provides multi-column layouts, control over the positioning of the open/close icon, and accessible text labels for the icons.
- Blog: The Latest Posts block provides more fine-grained control over the layout, including defining the number of columns, boxed vs. non-boxed format, image aspect ratio, and category styling.
- Button: KadenceWP Blocks provides easy options to set the button width to be automatic, a fixed width or full width. This has to be done with custom CSS in Divi. KadenceWP Blocks includes the ability to add accessible text on icons and aria-labels on buttons for improved accessibility. Divi does not include any of these options.
- Gallery: The KadenceWP Gallery block includes 5 different layouts in the free version, including a masonry, carousel and slider layouts. The Pro version adds two more layouts. Additionally, KadenceWP sliders are coded to be accessible for keyboard and screen reader users in a way that the Divi versions are not.
KadenceWP Blocks also provides block options that are not available in Divi.
- Icon List: create a stylized bulleted list using custom icons as the bullets
- Info Box: 6 layout options are available to create call-out boxes that can include custom icons, borders and backgrounds
How To Use KadenceWP Blocks Within a Divi Theme
You can use KadenceWP Blocks and Divi Page Builder modules on the same page. First, when you create a new page, select the option to use the Default Editor, not the Divi Builder.
Use KadenceWP and standard WordPress blocks as much as possible, but if you need to add a Divi layout or module, select the Divi Layout block. This will launch the Divi Visual Builder interface.
I recommend using the following KadenceWP Blocks instead of the equivalent Divi Module
| KadenceWP Block | Divi Module |
|---|---|
| Accordion | Accordion and Toggle |
| Posts | Blog |
| Testimonial | Blurb, Comments and Testimonial |
| Buttons | Button |
| Info Box | Call To Action |
| Form (or use a separate form tool like Gravity Forms) | Contact Form |
| Gallery | Gallery |
| Text | Heading and Text |
| Icon | Icon |
| Image | Image |
| Advanced Slider (Pro) | Slider and Video Slider |
| Tabs | Tabs |
Conclusion
If it’s not within your organization’s budget at the moment to rebuild your whole website, replacing Divi Page Builder modules with KadenceWP Blocks can be a cost-effective way to increase accessibility within your web content in the interim.
Website Accessibility Services
If you would rather let someone else make your website accessible, Elevage Digital offers Website Accessibility Audit, Remediation, and Accessible Website services. Request a Quote today to start the conversation.