🧩 Divi Accessibility Helper – Full Documentation
🚀 Overview
Divi Accessibility Helper is a powerful plugin designed to improve the accessibility of Divi websites without requiring any coding.
It enhances usability across key areas such as keyboard navigation, screen readers, color contrast, motion control, forms, navigation, and media.
🎯 Plugin Goals
- Improve website accessibility for all users
- Support assistive technologies
- Enhance overall user experience
- Fix common accessibility issues
- Follow accessibility best practices without coding
🧭 Settings Overview
- Keyboard
- Screen Readers
- Colors & Contrast
- Motion
- Images & Media
- Forms
- Navigation
- Custom Rules
⌨️ Keyboard Accessibility
Features
- Show Focus Outline: Highlights elements during keyboard navigation
- Focus Outline Color: Customize outline color
- Enable Keyboard Click Support: Use Enter/Space to activate elements
- Fix Tab Order Issues: Ensures logical navigation order
- Keep Focus Inside Popups: Prevent focus escape
- Close Popups with Escape Key: Close modals using ESC
🗣️ Screen Reader Support
Features
- Hide Decorative Icons: Prevent unnecessary reading
- Add Labels to Icon Buttons: Add meaningful labels
- Announce Dynamic Content Changes: Notify updates
- Announce Expand/Collapse States: Improve toggles
- Mark Hidden Elements Properly: Hide from screen readers
- Improve Social Media Labels: Better accessibility labels
🎨 Colors & Contrast
Features
- Enable Contrast Checker: Detect low contrast
- Highlight Contrast Issues: Visual warnings
- Check Button Contrast States: Validate button states
- Check Link Visibility: Ensure link clarity
🎞️ Motion Control
Features
- Respect Reduced Motion Preference: Adjust animations
- Disable Autoplay Animations: Stop auto animations
- Reduce Animation Intensity: Minimize motion
- Disable Parallax & Scroll Effects: Remove heavy effects
🖼️ Images & Media
Features
- Detect Missing Alt Text: Warn missing descriptions
- Allow Decorative Images: Mark non-essential images
- Warn About Duplicate Alt Text: Avoid repetition
- Require Pause Controls: Control moving content
- Suggest Captions: Encourage captions
📝 Forms Accessibility
Features
- Connect Labels to Fields: Proper input labeling
- Announce Form Errors: Accessible error messages
- Show Error Summary: Display errors clearly
- Highlight Required Fields: Improve visibility
- Prevent Placeholder-only Fields: Avoid misuse
🧭 Navigation Accessibility
Features
- Enable Keyboard Navigation for Menus: Full keyboard support
- Announce Current Page: Identify active page
- Improve Dropdown Accessibility: Fix submenu issues
- Close Menus with Escape Key: Easy exit
- Prevent Hover-only Menus: Mouse-free usability
🧩 Custom Rules
Overview
Create targeted accessibility improvements without coding.
How It Works
- Element to Watch: CSS selector
- Event: Click, Load, Focus, etc.
- Action: ARIA or focus control
- Target: Same or different element
Example Use Cases
- Add ARIA label to icon button
- Toggle menu accessibility states
- Move focus to popup
⚙️ Performance & Safety
- Progressive enhancement
- Non-breaking logic
- Safe fallbacks
- Minimal DOM manipulation
- Divi compatible
⚠️ Known Limitations
- Dynamic content may vary
- Third-party plugins differ
- Advanced cases need Custom Rules
🧪 Testing Recommendations
- Use keyboard navigation (Tab, Enter, ESC)
- Test menus and popups
- Inspect ARIA attributes
- Test with screen readers
💡 Best Practices
- Enable features gradually
- Test each setting
- Use Custom Rules for edge cases
- Avoid complex selectors
🚀 Future Improvements
- Smarter Divi detection
- Better contrast automation
- Performance improvements
🧾 Summary
Divi Accessibility Helper is a complete accessibility toolkit for Divi websites, helping you improve usability, support assistive technologies, and enhance user experience—without writing code.
💬 Support
If you need help, review feature descriptions, test settings step-by-step, and use Custom Rules for advanced fixes.