Strategies for Creating Accessible Websites Using Divi Theme and PageBuilder
Intro
- Web developer for over 20 years.
- Located in Fredericksburg, VA (between DC and Richmond)
- Work with non-profits, tourism and economic development, hospitality and small businesses.
Background
- Partner with a local agency that works with local government agencies, commissions and related orgs.
- All sites are built using Divi
- Started investigated ways to deal with Divi-based accessibility issues
- Focused on Divi 4, haven’t done any testing on Divi 5 yet
Divi Theme Issues
- Missing Skip to Content link
- Can’t zoom in/out on mobile
- Missing focus indicators
- Drop-down menus are not keyboard accessible
- Icons are read out as the symbol name
- Search icon is not keyboard accessible
- Mobile Navigation is not keyboard accessible
- Search form does not have a label
- Can tab to search form when it is hidden
Divi Module Issues
- Accordions, Tabs and Toggles are not keyboard accessible
- Blog module adds ambiguous “Read More” link; no ability to add aria-label
- “Button” module can’t add aria-label and outputs <a></a> tags instead of <button></button> when link value is null or #
- Contact Form and Email Opt-in form labels are hidden, required fields are not identified, errors are not conveyed to screen readers
- Sliders don’t have accessible names for arrows
Why These Problems Are Hard To Solve
- Not everything can be fixed with Javascript; PHP and theme file edits are required to address some issues
- So many different ways to configure Divi Theme – hard to account for and test all variations
- Divi Builder ignores some functions in the functions.php file
- A lot of what gets displayed is dynamically generated with Javascript – can be hard to target some dynamic elements
Options To Address Divi Issues
- Use a different theme
- Disable Certain Modules and Use Alternatives
- Blog – use a custom loop instead to fully control the HTML output
- Contact Form and Email Optin – use a different form tool (ex. Gravity Forms)
- Sliders and Gallery – use an alternative or reconsider the content – can the content be presented in a more accessible way?
- Create your own modules and plugins – https://diviplugins.com/downloads/divi-module-builder/
Divi Accessibility Plugin
- GitHub: https://github.com/campuspress/divi-accessibility
- Unclear if it is still being maintained
- Fix some of the basic Divi issues
Divi Assistant
- https://www.peeayecreative.com/product/divi-assistant/
- More than just accessibility
- Adds skip link, focus indicator and ability to zoom in/out
- Can tab through default navigation menu but search icon is not accessible
- Can still hear an tab to hidden search form
- Accordion, Toggle and Tabs still have some keyboard issues
- Slide-in and Fullscreen menu options not keyboard accessible
Divi-Modules Accessibility Plugins
- https://divi-modules.com/products/accessibility-bundle/
- Some promising features but still a large number of issues and limitations
- Developer is open to making improvements
Fix Divi A11y Plugin
- Enable zooming in/out
- Adds a Skip to Content link
- Adds a focus indicator
- Labels for the social media icons
- Mobile menu, fullwidth and slide-in keyboard accessible*
- Drop-down menus keyboard-accessible, including button to open/close submenus
*requires changes to header.php
- Aria-label on blog module Read More link
- Prevents tabbing to the search form when it’s not visible
- Search icon and form keyboard accessible*
- Stop animations for “prefers-reduced-animation”
- Accordions, toggles and tabs keyboard-accessible
Fix Divi A11y Modules Plugin
- Prevents icon from being read to the screen reader
- Adds the ability to define an aria-label
- Outputs <button></button> code if the link value is #
GitHub, Installation and Settings
- https://github.com/elevagedigital/fix-divi-a11y
and https://github.com/elevagedigital/fixdivi-a11y-modules - After install go to Settings > Fix Divi A11y to set focus indicator color
- Update header.php
Header.php Changes
- Create child theme
- copy the contents of header-new.php (in plugin files) to header.php in theme files
- Improves coding for search icon and form
- Adds support for making mobile/slide-in menu keyboard accessible
Additional Code Snippets
- https://github.com/elevagedigital/fix-divi-a11y/blob/main/custom-code.txt
- Show logo on focus for fixed header that is initially hidden
- Play/Pause for video background
Potential Future Updates
- Divi 5 support
- Custom Blog Module
- Custom Slider
- Icon Bulleted List