Divi Accessibility Suite documentation

Overview

Divi Accessibility Suite improves the accessibility of Divi websites without requiring any coding. It is built specifically for Divi, so it keeps your design and layout intact while improving usability in these areas:

• Keyboard navigation
• Screen reader compatibility
• Color contrast
• Motion control
• Images & media
• Forms
• Navigation

The plugin helps you improve accessibility for all users, support assistive technologies, fix common accessibility issues and follow best practices, all without code.

Installation

1. Download the plugin ZIP file from your Divi Marketplace purchase.
2. In WordPress, go to Plugins → Add New and click Upload Plugin.
3. Select the ZIP file, then click Install Now and Activate.
4. Open Divi Solution → Accessibility Suite in the WordPress admin menu to configure the settings.

Settings overview

The settings are organised into tabs. Every feature is a switch, so you can turn fixes on and off safely. Click Save Changes after updating settings.

Keyboard accessibility

Improve navigation for users who rely on keyboard input.

• Show Focus Outline: highlights elements when navigating with the keyboard.
• Focus Outline Color: customise the outline colour to match your design.
• Enable Keyboard Click Support: lets the Enter and Space keys trigger buttons and links.
• Fix Tab Order Issues: ensures a logical navigation order when using the Tab key.
• Keep Focus Inside Popups: prevents focus from leaving modals or menus.
• Close Popups with Escape Key: lets users close popups with the Esc key.

Screen reader support

Enhance compatibility with screen readers and assistive tools.

• Hide Decorative Icons: prevents non-essential icons from being read aloud.
• Add Labels to Icon Buttons: adds meaningful labels to icon-only buttons.
• Announce Dynamic Content Changes: notifies screen readers when content updates.
• Announce Expand/Collapse States: improves accessibility for toggles and dropdowns.
• Mark Hidden Elements Properly: ensures hidden content is not read.
• Improve Social Media Labels: adds proper labels to social icons.

Colors & contrast

Improve readability and visual clarity.

• Enable Contrast Checker: detects low-contrast text and elements.
• Highlight Contrast Issues: visually flags accessibility issues.
• Check Button Contrast States: ensures buttons meet contrast standards in all states.
• Check Link Visibility: makes sure links are clearly distinguishable.

Motion control

Reduce motion for better accessibility and comfort.

• Respect Reduced Motion Preference: adapts animations to the visitor’s system settings.
• Disable Autoplay Animations: stops sliders and animations from playing automatically.
• Reduce Animation Intensity: minimises excessive visual motion.
• Disable Parallax & Scroll Effects: removes heavy scrolling animations.

Images & media

Improve the accessibility of visual content.

• Detect Missing Alt Text: warns when images lack descriptions.
• Allow Decorative Images: marks non-essential images appropriately.
• Warn About Duplicate Alt Text: prevents repeated or incorrect descriptions.
• Require Pause Controls: ensures moving content can be paused.
• Suggest Captions: encourages captions for important visuals.

Forms accessibility

Make forms easier to use and understand.

• Connect Labels to Fields: ensures all inputs have proper labels.
• Announce Form Errors: makes errors readable by screen readers.
• Show Error Summary: displays errors clearly at the top of the form.
• Highlight Required Fields: improves the visibility of required inputs.
• Prevent Placeholder-only Fields: avoids using placeholders as labels.

Navigation accessibility

Improve the usability of menus and navigation.

• Enable Keyboard Navigation for Menus: allows full menu navigation with the keyboard.
• Announce Current Page: helps screen readers identify the active page.
• Improve Dropdown Accessibility: fixes submenu behaviour.
• Close Menus with Escape Key: allows an easy exit from menus.
• Prevent Hover-only Menus: ensures menus work without a mouse.

Custom rules

Custom Rules let you apply accessibility fixes to specific elements without writing code. Use them to add missing ARIA attributes, improve keyboard interactions, control focus behaviour, or fix third-party and Divi module issues.

How a rule works

1. Element to watch: the CSS selector that triggers the rule.
2. Event: when the rule runs: Click, Page Load, Focus, Blur or Key Down.
3. Action: Set ARIA attribute, Toggle ARIA attribute, or Move focus.
4. Target element: the same element, or a different element chosen with a custom selector.

Examples

Performance & safety

The plugin is built with progressive enhancement, non-breaking logic, safe fallbacks, minimal DOM manipulation and full Divi compatibility.

Known limitations

• Dynamic content may behave differently.
• Third-party plugins vary in structure.
• Some advanced interactions require Custom Rules.
• The initial page load may not catch every dynamically added element.

Testing & best practices

After enabling features

• Navigate using the keyboard (Tab, Enter, Esc).
• Test menus and popups.
• Inspect ARIA attributes in your browser’s developer tools.
• Test with a screen reader if possible.

Best practices

• Enable features gradually and test each setting individually.
• Use Custom Rules for edge cases.
• Avoid complex selectors and keep configurations simple.

Planned improvements

Smarter Divi detection, improved contrast automation, font accessibility enhancements, builder-level insights and performance optimisations.

Support

Customers can open a support ticket from their purchase on the Divi Marketplace. For pre-sales questions, use our contact form or email solutionstudioplugins@gmail.com.