Fix Divi A11y Plugin Version 1.3 Released

The latest version of the Fix Divi A11y plugin is available through the GitHub repository.  The Fix Divi A11y plugin is a free plugin that addresses many of the biggest accessibility issues with the Divi theme and page builder. This plugin does require creating a child theme and editing PHP template files.

Version 1.3 includes updates to the options for focus indictor styling, code structure for accordion titles and keyboard support for the Back to Top link. Note, several of these changes may have design impacts, so it is recommended that you test on a non-production environment first.

Focus Indicator Styling

We’ve expanded the options for styling the focus indicator. You can find these options in the WordPress Admin section under Settings > Fix Divi A11y. There are now three styles to choose from:

• Simple (default): this is a single color, 2px outline
• Two Colors: this adds a 2px solid outline using the first color and then a solid box shadow using the second color. This is good for sites with a combination of light and dark background colors. Choose colors that have significant contrast with your background colors and at least one of the two colors will serve as an effective focus indictor.
• Advanced: Creates a more stylized box shadow effect created by using white, black and your chosen indicator color.

You can set you color by either entering the hex code or by using the color picker. The code for the settings page has been moved to a separate file and folder within the plugin code.

Accordion Changes

In previous versions, the accordion titles were given the role of button and associated ARIA attributes. Based on the ARIA Accordion Example pattern, I’ve added an HTML button inside the accordion title heading. This preserves the semantic purpose of the headings while still providing the necessary interactive and ARIA markup. The main CSS file has been updated to help apply heading styles to the new button content, but this should be tested on a non-production environment first.

A setTimeout has been added to ensure ARIA attributes are updated after DIVI’s animation completes, that should result in a smoother user experience.

Back To Top Link

The footer-new.php file in the plugin’s root folder contains updated code to make the Back to Top link keyboard operable. The new code is a semantic link tag with an aria-label as opposed to the non-semantic span tag that uses javascript to create an interactive element. You can copy this file to your child theme folder to replace the theme’s default.