Your site runs on Divi, it looks the way you want, and now someone has asked whether it works for people using a keyboard or a screen reader. You open the Visual Builder and everything seems fine. The question is what happens off the mouse.
Divi accessibility comes down to two things: what the modules produce, and how the pages were assembled from them. This post covers the problems that keep turning up on Divi sites, the modules that deserve extra care, how to think about add-on plugins, and a simple way to test a Divi page yourself. It applies whether you use the Divi theme or the Divi Builder plugin with another theme.
Test the front end, not the Visual Builder
The Visual Builder is a design view. It wraps your page in editing controls that are not there for visitors, so keyboard and screen reader behavior inside it tells you nothing useful.
Always test the published page, logged out, in a private browser window. If you stay logged in, the admin bar and builder scripts can change what you see and hear. Pick a few pages built from different layouts: the home page, a service page, the contact page, a blog post and anything with a slider or tabs.
Common Divi theme accessibility problems
Few of these issues are unique to Divi, but Divi’s flexibility makes some of them very easy to create.
Heading levels chosen for looks
In the Text module, it is tempting to type a line and make it an H2 because H2 is the size you like. Blurb titles and other module titles also output as headings, so a row of six blurbs adds six headings to the outline. The result can be a page where the visual hierarchy and the heading outline disagree completely.
Recent versions of Divi let you change the heading level used for titles in many modules from their design settings. Check your version, choose levels by structure (one H1, H2 for sections, H3 for items inside them), and style the size separately.
Focus that disappears
Divi child themes and copied CSS snippets sometimes include a rule that removes the focus outline, usually because someone thought it looked odd on a button. Without it, keyboard users cannot tell where they are. Replace any rule that hides outlines with a visible focus style that suits the design, and check it on dark and light sections alike.
Low-contrast text over images and gradients
Divi makes it easy to put white text over a photo or a gradient background. Where the text crosses a light part of the image, contrast drops below 4.5:1. A darker overlay on the section, or placing text on a solid area, usually fixes it.
Links and buttons with vague names
Button modules saying “Learn more,” blurbs where the whole box is a link with no clear name, and image modules linking to pages with no alt text all leave screen reader users guessing. Give each button specific text and each linked image alt text that says where it goes.
Animations everywhere
Divi’s entrance animations (fade, slide, bounce and so on) are easy to apply to every module. For some people motion causes discomfort, and animated content can also appear late for keyboard and screen reader users. Use them sparingly, and see our post on animation and reduced motion for what to keep.
Divi modules to be careful with
| Module | What to check | Usual fix |
|---|---|---|
| Slider and Fullwidth Slider | Autoplay, named arrows and dots, keyboard access, text contrast over images | Turn off autoplay or add a pause control; often replace with a static section |
| Toggle, Accordion, Tabs | Reachable by keyboard, open or closed state announced | Test on your version; add-ons or small scripts can fill gaps |
| Contact Form | Visible labels, required fields in text, announced errors and success message | Keep labels visible; consider a dedicated form plugin for complex forms |
| Menu and Fullwidth Menu | Dropdowns by keyboard, mobile toggle named and stateful | Fix in the Theme Builder header; test both desktop and mobile widths |
| Social Media Follow | Each icon has a name like “Facebook” | Check names in a screen reader; add text where missing |
| Gallery and Image | Alt text, lightbox keyboard support and focus return | Write alt text in the media library; test the lightbox with Escape |
| Countdown Timer | Constant updates read out or ignored, contrast | Keep a plain-text deadline next to it |
The menu deserves special attention because it is on every page. Can you open a dropdown with the keyboard and reach every item? Does the hamburger button say “button” and whether it is expanded? Our guide to accessible navigation and dropdown menus lists what to check.
Start site-wide fixes in the Theme Builder
If your header and footer are built in Divi’s Theme Builder, fixes there apply to every page at once. That is where to start: logo alt text, the main menu, a skip link if your setup lacks one, footer link text and contrast.
The same goes for global presets and global colors. Set a palette where every text and background pair you actually use has enough contrast, and build presets for buttons with a visible focus style. Then new pages inherit good defaults rather than everyone picking colors by eye.
Add-on plugins for Divi accessibility
There are add-ons, including free ones, aimed specifically at known Divi gaps. In general, they do things like restore focus outlines, add a skip link, add screen reader text to icons, or improve keyboard support for toggles and tabs.
They can be genuinely helpful, with a few cautions:
- Read what each option changes and turn on only what you need.
- Test before and after, because an option that helps one module can conflict with your custom CSS.
- Check the add-on is maintained and still works with your Divi version.
- Do not confuse these helpers with overlay toolbars that promise automatic compliance. They are different things.
For a broader view of what each kind of plugin can and cannot do, see our post on types of WordPress accessibility plugin.
A quick Divi accessibility test you can run on any page
- Keyboard pass. From the address bar, press Tab through the page. Note anything you cannot reach, cannot see focus on, or get stuck in. Our keyboard navigation testing guide has a recording sheet if you want to be thorough.
- Structure. Run WAVE or a similar scanner and look at the heading outline and any missing alt text or labels.
- Zoom. Zoom to 200 percent, then 400 percent. Look for overlapping text in fullwidth headers and cut-off buttons.
- Screen reader. With NVDA or VoiceOver, listen to the header, one slider or tab set, and the contact form.
- Mobile. On a phone, open the menu, submit the form with a mistake, and check the tap targets are not cramped.
Write down what you find by page and module. Patterns appear quickly, and fixing a Theme Builder template or a global preset can clear many of them in one go. The bigger picture of where page builder work fits is in our guide to making a WordPress website accessible in order.
Frequently asked questions
Which Divi pages should I test first?
Start with any page, since the Theme Builder header and footer appear everywhere. Then test the home page, the contact page with its form, a blog post, and every layout that uses a slider, tabs or toggles. Pages built from the same layout or preset usually share the same problems, so one example of each is enough to start.
Do I need to rebuild my Divi site to make it accessible?
Usually not. Fixing the Theme Builder header and footer, global colors and presets, and the heading structure of key pages solves a large share of problems. A rebuild makes sense if the site is old, inconsistent and due for a redesign anyway, but it is not a requirement for accessibility.
Are Divi accessibility add-ons safe to use?
Generally, if they are maintained and you test them. They change front-end markup and styles, so turn on only the options you need, check the pages with a keyboard before and after, and confirm compatibility after each Divi update. Avoid confusing them with overlay widgets that promise automatic fixes.
Does the Divi Builder plugin behave the same as the Divi theme?
The modules are the same, so module-level problems are similar. The difference is the frame around them: with the plugin, your header, footer, menu and focus styles come from whichever theme you use, so those parts need testing on their own terms.
If you want help with the builder output in particular, our Divi accessibility fixes cover modules, Theme Builder templates and presets. The full site, including plugins and content, is covered by our WordPress accessibility services, part of our wider website accessibility services.
Next in this series: Block Editor Accessibility: A Block-by-Block Guide
