Divi Accessibility Checker

Accessibility on Divi

Divi is a WordPress theme and visual builder from Elegant Themes. Pages are built from sections, rows and modules, such as Text, Image, Blurb, Toggle, Tabs, Slider, Contact Form and Menu, and Divi 5 rebuilds the builder on a newer foundation. Many sites also run Divi through a purchased layout pack.

Divi puts a lot of design control in your hands, and a module’s default markup is rarely the problem. Issues come from how modules are combined and styled: heading tags set by appearance, text laid over photos, hover-only menus and forms that depend on placeholders.

Elegant Themes publishes a guide to making a Divi website more accessible. It covers the builder’s settings for headings, images, links and contrast, which are the same areas this scan reports on for every page. (opens in a new tab, source: Elegant Themes: How to make your Divi website more accessible)

Common Accessibility Issues on Divi Sites

• Headings and text modules

  Text and Blurb modules let you pick a heading tag, and layout packs often choose it for the look, so pages skip levels or have more than one h1.

• Hover-only dropdown menus

  Menus that open on hover and cannot be opened with the keyboard cut off every page below the top level for keyboard and touch users.

• Contact form fields

  The Contact Form module often uses a field’s title as its placeholder, so the visible name vanishes as soon as someone types.

• Sliders, video backgrounds and parallax

  Auto-advancing sliders, looping video backgrounds and scroll effects can start on their own with no way to pause them.

• Text over images and overlays

  Fullwidth headers and hero sections set text on top of photos, where contrast depends on the image and the overlay color.

How AccessBell Scans Your Divi Site

1. Enter any public page. Paste the address of a page on your Divi site into the scanner above. There is nothing to install: no plugin, no code snippet and no login.
2. We load it in a real browser. AccessBell opens the page in headless Chrome and runs its scripts, so it tests what your visitors actually see, including content added by your theme, apps or plugins.
3. We run the WCAG rules. The open-source axe-core engine checks the page against the standard you choose, and every result is mapped to the WCAG success criteria it affects.
4. You see what is wrong in seconds. The free scan lists every issue it finds, ranked by severity, with the WCAG criteria each one fails. Start a free trial to get the failing code and the fix for each one. Our methodology explains exactly what runs and what still needs a person.

What You Get From the Free Scan and the Free Trial

Free, with no account

• 63 automated rules for WCAG 2.2 Level AA, or presets for WCAG 2.1 AA, the ADA, Section 508 and EN 301 549
• Every issue found on the page, ranked by severity from critical to minor
• The WCAG success criteria each issue fails, which you can look up in our WCAG library

With a 3-day free trial

• The failing HTML, so you can find the element in your Divi editor or code
• How to fix each issue, with a corrected example
• Every page scanned, up to 500 per domain, with daily monitoring and an email when something breaks
• A list of checks that need a person to review, so nothing is missed
• A dated record of your scans and fixes

Start 3-day free trial

How to Fix What the Scan Finds

1. Review heading tags on every layout you import, and set them by outline rather than appearance.
2. Make sure the main menu can be operated with Tab, Enter and Escape, and test the mobile menu as well.
3. Replace placeholder-only fields with visible labels, and give every slider and background video a pause control or remove the autoplay.
4. Run a free scan above on your homepage and a few key pages, fix issues starting with critical and serious, then rescan to confirm.
5. For ongoing protection, AccessBell Pro monitors up to 500 URLs per domain every day and alerts you when a theme, app or plugin update introduces a new issue.

Related Guides

• WCAG 4.1.2 Name, Role, Value Explained in Plain EnglishWCAG 4.1.2 Name, Role, Value explained simply: give every control a name, role and state with native HTML and ARIA, with code examples and how to test.
• WCAG 1.4.3 Contrast (Minimum) Explained in Plain EnglishWCAG 1.4.3 Contrast (Minimum) explained simply: the 4.5:1 and 3:1 ratios, what counts as large text, the exceptions, fixes and how to test your colors.
• Keyboard Accessibility TestingA practical guide to keyboard accessibility testing: what to check, the exact keys to use, and a component-by-component reference table mapped to WCAG.
• WCAG Success Criteria LibraryLook up any success criterion the scan flags, in plain language.
• Divi ADA Compliance CheckerThe same scan with the ADA preset, plus the ADA risks specific to Divi sites.
• Free Accessibility Statement GeneratorPublish a statement once your Divi site's known issues are fixed.

Divi Accessibility — Frequently Asked Questions