Divi5 Semantic Elements Still Have a Way To Go to Improve Accessibility and WCAG Conformance

Elegant Themes released their new Semantic Elements feature for Divi5 on January 3, 2025. The goal of this feature is to allow you to change the base HTML tag for a particular Divi module from a DIV or SPAN to something that has semantic meaning.  Using semantic HTML is important for accessibility and WCAG conformance.  While this feature is a good first step to making Divi websites more accessible, it solves very few use cases and does not fix one of the biggest issues I see with the lack of semantic code – links that are not accessible because the link tag is not directly included in the HTML. 

What’s the Problem?

First. Let’s look at what code these modules produce by default and why it’s a problem for accessibility. 

Linking a Whole Module

There are a number of Divi modules that include a setting to add a Link URL to the whole module.  Unfortunately, for modules like Blurb, Call To Action, Heading, Hero, and Person, the HTML output does not include an <a> tag.  The link behavior is dynamically attached to the <div> tag.  This is a failure for multiple WCAG Success Criteria, including

• 1.3.1 Info and Relationships because it is not clear from the code that this is a link
• 2.1.1. Keyboard Operable because keyboard-only users and assistive technology users cannot interact with this link

Using the new Semantic HTML feature to apply the <a> tag does not include the HREF attribute for the link, so the links are still inaccessible for keyboard and assistive technology users. 

Modules with Multiple Interactive Elements

The new Semantic HTML feature seems to only apply to the whole module or one specific element within the module.  So, for modules like galleries, sliders, and the filterable portfolio, there is no way to convert each SPAN tag for the forward and back arrows to separate buttons.  This still needs to be done with custom code. 

Accordions, Toggles, and Tabs

Complex modules like Accordion, Toggle, and Tabs are another area where the new Semantic HTML feature is not quite ready for prime time.  Accordion item titles should be semantic buttons because clicking them changes the state of an accordion section. 

When I tried to apply the button element to an open accordion item, it wrapped both the heading and the content area in the button tag.  On a closed accordion item, only the heading was wrapped.  In both cases, the button tag should be wrapped by the heading tag, not the other way around.  Keeping the heading tag outside the button preserves the ability for assistive technology users to navigate the page based on the available headings.  Using the new feature on tabs wraps the entire set of tabs.  There’s no way to apply button tags to each tab heading. 

The Fix Divi A11y plugin is still the best approach that I know of to make these complex modules accessible and WCAG-conformant.

What Does Work

One important improvement with the semantic HTML feature is the ability to create semantic buttons using the Button module. 

As I’ve mentioned before, the Divi Button module actually creates links that are styled to look like buttons.  Links take the user to a new location on the Internet.  Buttons initiate a particular action or change in state.  Links and buttons are communicated differently to assistive technologies so the user knows what behavior to expect.  Links are created using <a> tags with an href attribute.  Buttons are typically created using the <button> tag or the <input> tag with the type=”button” attribute.  As a fallback, you can add the role=”button” attribute to an <a> tag. 

Creating a Semantic Button in Divi5

1. Add a Button Module to your page and style it.  Make sure to change the default “Click Here” text to something more meaningful.  If you are using an icon as part of your button style, watch my video about how to hide these icons from screen readers. 
2. If you are going to attach custom JavaScript to this button, add a custom class or ID using the Attributes settings. 
3. Go to the Advanced Tab and open the HTML section.  Under Element Type, select Button. 

The addition of the Semantic HTML feature seems to indicate that Elegant Themes is finally hearing the near-constant appeals for more accessibility features in Divi5.  Hopefully, they will continue to fix the bugs and expand the capabilities of this feature.  Until then, making a Divi website accessible and WCAG-conformant will still require a significant amount of custom coding and finding more accessible alternatives to built-in Divi modules.