Overview Of The Divi Accessibly Helper Plugin For WCAG2 Compliance by Pee Aye Creative

Overview Of The Divi Accessibly Helper Plugin For WCAG2 Compliance

This post and video is an introduction to a new plugin called Divi Accessibility Helper, which helps make your Divi website WCAG2 complaint!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Features

The settings for this plugin are integrated into the Divi Theme Options settings panel. So just to go to Divi>Theme Options and you will see a new tab called Divi Accessibility Helper. Inside that tab will be all the settings.

divi accessibility helper plugin overview

Tata11y Integration

Add a small button to the bottom corner of the site to visualize how your site performs with assistive technologies. (only for Admin users)

Use Title Text From Library

Automatically update Title text for images on the front end when it gets updated in WordPress Library.

Use Alt Text From Library

Along with many other Accessibility options, Divi Accessibility Helper allows you to automatically and dynamically get the alt text and title text for images from the WordPress media library for the following modules:

  • Image
  • Blurb
  • Fullwidth image
  • Fullwidth header
  • Slider
  • Fullwidth slider

Focusable Modules

Allow Divi modules such as Toggle & Accordion to be focusable with keyboard navigation. Hitting enter will open/close when focused.

ARIA Support

Add appropriate ARIA attributes across Divi elements & modules.

Option to underline all links

Use this option to underline all links.

Screen Reader Text

Add plugin screen reader class used on certain labels & reverses Divi incorrectly applying display: none; on its own screen reader classes.

Enable Keyboard Navigation Outline

Add an outline to focused elements when navigating with the keyboard.

Fix Duplicate Menu Ids

Because Divi uses the same menu twice (Once for the primary menu and again for the mobile menu), the unique ID’s are duplicated, causing validation issues. This option prevents WordPress from adding a unique ID to the menu list items.

Set Icons Aria Hidden

Hide icons to screen readers, so the text is read normally.

Mobile Menu Aria Support

Apply Aria attributes to the mobile (hamburger) menu to make it accessible. Close menu when focus out required “Skip Navigation Link” to be enabled.

Fix Missing Labels

Fix missing labels & incorrect or missing assignments to their corresponding inputs.

Dropdown Menu Keyboard Navigation

Allow easier navigation of Divi dropdown menus with the keyboard.

Divi Accessibility Helper Divi Cake 1 590x300 1

We rarely do affiliate posts, but we have close working relations with the developers of the plugin and are doing this to help get the word out about their exciting and much needed new plugin!

notice of Divi Accessibility closure on the WordPress repository

As of the time of this writing, the plugin still exists publicly on Github. So you may be asking, what are the differences, and which one should you use?

Due to the nature of the functionality, the two plugins have many similar features. About 75% of the features from premium Divi Accessibility Helper could be found in the free Divi Accessibility plugin. However, there are always more things to consider than just price, so let’s take a look at the differences in features and other factors.

Divi Accessibility (free on GitHub)

The plugin on GitHub is not actively maintained or developed. The last commit was June 18, 2021.

There is no support available. Getting access to technical support is one of the best reasons to pay for any plugin.

Divi Accessibility Helper (paid by Divi Codex)

The plugin is brand new, so version 1.0 is a solid plugin, but they are also looking to add new features regularly. Please let them know if you have any feature suggestions, and they will implement them!

Helpful support is available when needed if you have questions or face any technical issue.

More Features

1. Divi Theme Options Settings: All the plugin settings are build directly into Divi for convenience and familiarity.

2. Use Alt Text From Library: Automatically update Alt text for images on the front end when it gets updated in WordPress Library. This has several settings as shown in post/video above.

3. Use Title Text From Library: Automatically update Title text for images on the front end when it gets updated in WordPress Library. This has several settings as shown in post/video above.

4. Option to enable browser pinch and zoom and add the correct metadata for the viewport

Last updated Oct 26, 2022 @ 5:58 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart