Divi Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance Guide

Last updated: 2026-05-22

Divi, from Elegant Themes, is one of the most popular WordPress theme-and-builder combinations, used heavily by freelancers and small agencies because of its visual builder, large library of pre-made layout packs, and one-price lifetime licensing. Like other visual builders, Divi makes it easy to produce pages that look polished but are structurally inaccessible, because the builder lets you control appearance independently of meaning. Every module that displays a title lets you choose its heading level from a dropdown, so editors pick levels by size and break the document outline. The pre-made layout packs that make Divi so fast to use frequently ship with light-gray body text and pale buttons that fail color-contrast minimums. The Slider, Toggle, Accordion, and Tabs modules have historically rendered markup that screen readers and keyboard users struggle with, and the Contact Form module defaults to placeholder-style labelling. Elegant Themes has shipped accessibility improvements to Divi over several releases, but the responsibility for an accessible result still lands on whoever assembles the page, and importing a layout pack imports its accessibility problems along with its design. With the European Accessibility Act now in force for businesses serving EU consumers, and ADA Title III claims in the US continuing to name small-business sites, Divi users should bake accessibility into the build rather than treat it as a final-step audit. This checklist covers the issues we see most often on Divi sites and the specific Divi Builder steps and markup targets to fix each one. It pairs with our deeper write-up of the five highest-impact Divi fixes.

Common Accessibility Issues

critical

Module Title Heading Levels Chosen by Appearance, Breaking the Outline

WCAG 1.3.1

Divi modules that display a title (Text, Blurb, Call To Action, Pricing Table, Fullwidth Header, and more) include a 'Title Heading Level' dropdown (H1-H6). Editors choose the level that produces the right font size, so pages end up with multiple H1s, skipped levels, and section titles at the wrong depth. Screen reader users who navigate by headings get a structure that does not reflect the visual organization of the page.

How to fix:

Plan one H1 per page (usually the Fullwidth Header or the page title) and a logical H2/H3/H4 nesting with no skipped levels. In each module's Design tab, set the 'Title Heading Level' (often under the Title Text toggle) to match the outline, and control size separately with the font-size setting. Audit imported layout packs immediately after import, they frequently set every section title to H2 or duplicate the H1.

Before 
<!-- Layout pack: duplicate H1 + skipped level -->
<h1 class="et_pb_module_header">Grow Your Business</h1>  <!-- second H1 -->
<h4 class="et_pb_module_header">What We Do</h4>           <!-- should be H2 -->
After 
<h1 class="et_pb_module_header">Northstar Marketing</h1>
<h2 class="et_pb_module_header">What We Do</h2>
<h3 class="et_pb_module_header">Brand Strategy</h3>
critical

Layout Packs and Default Designs Use Text and Buttons Below 4.5:1 Contrast

WCAG 1.4.3

Divi's pre-made layout packs are a major reason people choose Divi, but many of them use light-gray body text on white, pale or low-contrast button fills, and link colors that fall below the 4.5:1 minimum for normal text (3:1 for large text and UI components). Because the builder previews on the design's own background, these failures are easy to overlook, and the same color often repeats across every page of the imported pack.

How to fix:

Audit body text, button text on button fill, and link colors against a contrast checker, then adjust the colors in the Divi Theme Customizer (for global defaults) and in module Design settings. Where a color is reused, set it as a Global Color so a single change fixes every instance. Re-check hover and focus states and any text placed over background images or gradient overlays.

Before 
/* Layout-pack body text too light on white */
.et_pb_text { color: #a7a7a7; } /* ~2.5:1 on #fff - fails */
After 
/* Darkened to meet body-text contrast */
.et_pb_text { color: #454545; } /* ~8:1 on #fff - passes */
critical

Slider, Post Slider, and Fullwidth Slider Modules Autoplay Without a Pause Control

WCAG 2.2.2

Divi's Slider, Post Slider, and Fullwidth Slider modules can autoplay with a configurable interval and no built-in pause/stop control exposed to users. Auto-advancing content that runs longer than five seconds must be pausable, and moving content is also disorienting for screen reader users and people with attention-related or cognitive disabilities who cannot finish reading a slide before it changes.

How to fix:

In the slider module's Content/Design settings, turn Automatic Animation off, or if autoplay is required, add a visible, keyboard-operable pause control and enable pause-on-hover and pause-on-interaction behavior via custom code. Ensure the previous/next arrows and the dot navigation are reachable by Tab, operable with Enter/Space, and have accessible names. For most small-business pages a static header or a manually advanced slider is the more accessible choice.

Before 
<!-- Divi slider auto-animating, no pause control -->
<div class="et_pb_slider et_pb_slider_auto et_slider_speed_3000"> ... </div>
After 
<!-- Autoplay off (no et_pb_slider_auto class) or add a pause button -->
<div class="et_pb_slider"> ... </div>
<button type="button" class="slider-pause" aria-label="Pause slideshow">Pause</button>
serious

Toggle and Accordion Modules Do Not Expose Expanded State or Full Keyboard Operation

WCAG 4.1.2

Divi's Toggle and Accordion modules render their headers in a way that does not always announce them as expandable controls or report whether each section is open or closed, and keyboard operation can be inconsistent. Screen reader users cannot tell that a section can be expanded, or whether it currently is, and may not be able to operate it from the keyboard.

How to fix:

Ensure each toggle/accordion header is a real button (or has role="button" with tabindex and key handling) that exposes aria-expanded="true"/"false" and aria-controls pointing at its panel, and that the panel is a labelled region. If the module markup does not provide this, add a small Code module or theme JavaScript snippet to set the ARIA attributes and keep them in sync as sections open and close. Test that Enter and Space toggle each section and that the state change is announced.

Before 
<!-- Toggle header without state/role -->
<h5 class="et_pb_toggle_title">Do you offer refunds?</h5>
After 
<button class="et_pb_toggle_title" aria-expanded="false" aria-controls="toggle-1">
  Do you offer refunds?
</button>
<div id="toggle-1" role="region">...</div>
serious

Tabs Module Lacks the Tablist Keyboard Pattern

WCAG 2.1.1

Divi's Tabs module presents tabbed content but does not fully implement the WAI-ARIA tabs pattern. Tabs may not be operable with the Left/Right arrow keys, the selected tab's state may not be announced, and the relationship between a tab and its panel may not be exposed, so keyboard and screen reader users cannot navigate the tabbed content reliably.

How to fix:

Apply the tabs pattern: a container with role="tablist", each tab as a button with role="tab", aria-selected, and aria-controls, and each panel as role="tabpanel" with aria-labelledby. Wire Left/Right arrow keys to move between tabs and Home/End to jump to the first/last. Implement this with a Code module or theme JavaScript, or replace the Tabs module with an accessible alternative. Verify keyboard navigation and announcements with a screen reader.

Before 
<!-- Tab controls as plain anchors, no roles/keyboard -->
<ul class="et_pb_tabs_controls"><li><a href="#tab-0">Overview</a></li></ul>
After 
<div role="tablist" aria-label="Plan details">
  <button role="tab" aria-selected="true" aria-controls="tab-0" id="t0">Overview</button>
</div>
<div role="tabpanel" id="tab-0" aria-labelledby="t0">...</div>
serious

Contact Form Module Uses Placeholder Labels and Unassociated Error Messages

WCAG 3.3.2

Divi's Contact Form module places the field name as placeholder-style text inside the input rather than as a persistent, programmatically associated label. Placeholder text disappears on typing, is read inconsistently by screen readers, and is usually low-contrast gray. Validation errors are shown as a general message rather than being tied to the specific field with aria-describedby, and focus is not moved to the first error.

How to fix:

Give every field a real, persistent label associated with the input via for/id. If the module renders the field title as a placeholder only, add visible labels with a Code module or adjust the form so the title text is a true label. Indicate required fields in text (not color alone), associate each error message with its field via aria-describedby, set aria-invalid on failed fields, and move focus to the first invalid field on submit failure.

Before 
<!-- Field name as placeholder only -->
<input type="text" name="et_pb_contact_name" placeholder="Name">
After 
<label for="contact-name">Name <abbr title="required">*</abbr></label>
<input type="text" id="contact-name" name="et_pb_contact_name"
       required aria-required="true" aria-describedby="contact-name-error">
<span id="contact-name-error" role="alert"></span>
serious

Blurb and Icon Modules Expose Decorative Icons and Ship Images Without Alt Text

WCAG 1.1.1

The Blurb module pairs an icon or image with a heading and text and is one of Divi's most-used modules. Decorative icons are sometimes exposed to screen readers, adding noise, while images used in Blurbs and galleries are frequently published with empty alt text because the alt field is optional and easy to skip. Informative images then disappear for screen reader users.

How to fix:

For Blurbs that use a decorative icon next to a heading, ensure the icon is hidden from assistive technology. For Blurbs and image modules that use a meaningful image, fill in the image's alt text in the WordPress Media Library or the module's image settings; describe what the image conveys. For galleries, set alt text on each image. Leave alt empty only for genuinely decorative images.

Before 
<!-- Blurb image with no alt -->
<img src="/wp-content/uploads/team-photo.jpg" alt="">
After 
<img src="/wp-content/uploads/team-photo.jpg"
     alt="Northstar's five-person team standing in their studio">
<!-- Decorative blurb icon: -->
<span class="et-pb-icon" aria-hidden="true"></span>
moderate

Scroll Effects and Module Animations Ignore Reduced-Motion Preferences

WCAG 2.3.3

Divi's per-module animations and the Scroll Effects feature (parallax, vertical/horizontal motion, rotation, scaling, fading tied to scroll position) run for everyone regardless of the operating-system reduce-motion setting. Large or continuous motion can cause nausea and dizziness for people with vestibular disorders.

How to fix:

Add a prefers-reduced-motion media query in Divi's Custom CSS (Divi > Theme Options > Custom CSS, or the Theme Customizer) that disables scroll effects, transforms, and module animations when reduced motion is requested. Keep any remaining motion subtle and opacity-based rather than large positional movement.

Before 
/* Scroll effects + animations applied to all visitors */
.et_pb_section { transform: translateY(80px); }
After 
@media (prefers-reduced-motion: reduce) {
  .et_pb_section, .et-waypoint, [class*="et_animated"] {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
}

Divi-Specific Tips

  • Audit every layout pack the moment you import it. The design that makes Divi fast also imports that design's accessibility problems: duplicate H1s, light-gray text, pale buttons, and autoplaying sliders. Fix them before you build on top.
  • Set a global heading plan and reflect it in module Title Heading Level dropdowns: one H1 (usually the Fullwidth Header or page title), then H2/H3 in reading order. Control size with font settings, never with the heading level.
  • Fix contrast at the source. Set body text, link, and button colors in the Divi Theme Customizer and as Global Colors so a single change corrects every page, then verify each pairing with a contrast checker including hover/focus states.
  • Turn off slider auto-animation by default. If marketing requires it, add a visible, keyboard-operable pause control and pause-on-hover/interaction. A static Fullwidth Header is almost always the more accessible hero.
  • Toggle, Accordion, and Tabs modules usually need an ARIA/keyboard assist via a Code module or theme JavaScript: expose aria-expanded on toggle/accordion headers and apply the tablist pattern (roles + arrow keys) to tabs.
  • Test the published page with the keyboard and a screen reader, not the Divi Builder preview. Tab order, autoplay, focus handling, and module ARIA only behave like production on the live front-end.

axe DevTools

Browser extension that scans the published Divi page for WCAG violations and gives specific fixes. Run it on the live front-end with sliders, toggles, tabs, and forms in place rather than on the builder preview.

WAVE by WebAIM

Visual evaluator that flags missing alt text, empty links, contrast failures, and heading-order issues directly on the rendered page, useful for pinpointing which Divi module is at fault for non-technical owners.

WebAIM Contrast Checker

Check Divi layout-pack and Theme Customizer colors (body text, links, button text on fill) against 4.5:1 and 3:1. Setting corrected values as Global Colors fixes contrast across the whole site.

NVDA + Firefox / VoiceOver + Safari

Manual screen-reader testing verifies heading announcements, toggle/accordion state, tab navigation, and slider behavior on Divi sites, things automated scanners cannot judge for announcement quality.

Lighthouse (Chrome DevTools)

Built-in Chrome audit that catches common Divi issues like low contrast and missing accessible names. Treat a high score as necessary but not sufficient and combine it with manual keyboard and screen-reader testing.

Further Reading

Other CMS Checklists