How To Improve Divi Accessibility

Install The Divi Assistant Accessibility Helper Plugin

The first step is to install and activate the Divi Assistant plugin. This is a premium plugin that includes many advanced and important features, so purchasing a license is required to use it.

If you are unfamiliar with this plugin, it is our flagship plugin designed to make your life easier when working with Divi. The plugin includes collections called “helpers” of over 130 handy features and tools related to Divi and WordPress, like Utility Helper, Code Helper, Visual Builder Helper, etc. One of them is called the “Accessibility Helper,” which is the focus of this blog post.

Accessibility Helper

The Divi Assistant user interface is located in your website’s backend and styled similarly to Divi. You can find the accessibility tools by going to your WordPress dashboard to Divi Assistant>Accessibility Helper, where you will see the following settings:

Media Helper

We also have other accessibility-related features in the Media Helper. You can access these tools by going to your WordPress dashboard, going to Divi Assistant>Media Helper, and clicking on the Alt Text subtab. From there, you will see the following settings:

Accessibility Helper Features Overview

Add Focusable Support to Divi Module Elements

One of the key features of the Accessibility Helper is the ability to make Divi module elements focusable. This means users can navigate through your site using the keyboard’s “Tab” key. This feature is crucial for those who rely on keyboard navigation. When enabled, it ensures that elements like the Toggle and Accordion modules can be expanded or collapsed with the “Enter” key when they are in focus. This enhancement significantly improves the navigation experience for keyboard users.

Add Keyboard Navigation Outline to Focused Elements

To further aid keyboard users, the Accessibility Helper provides a visible outline to elements when they receive keyboard focus. This visual indication helps users keep track of their position on the page as they navigate through different interactive elements. The focused element stands out clearly, making it easier for users to know where they are and interact with the content effectively.

Customize Keyboard Navigation Outline Color

A well-designed website should be both functional and visually appealing. The Accessibility Helper allows you to customize the color of the keyboard navigation outline. This means you can choose a color that not only stands out but also complements your site’s design, ensuring that accessibility improvements do not compromise your website’s aesthetics.

Add ARIA Support to Divi Module Elements

Accessible Rich Internet Applications (ARIA) attributes play a vital role in improving web accessibility for users with disabilities. By adding ARIA support to Divi module elements, you enhance how assistive technologies, like screen readers, interact with your site. ARIA attributes provide additional context about interactive elements, making it easier for users to understand and navigate your content. This feature ensures that your site is accessible to a broader audience.

Set Icons as ARIA Hidden

Not all icons on a webpage provide useful information to users. When icons are purely decorative, it’s best to hide them from assistive technologies to prevent unnecessary distractions. The Accessibility Helper allows you to set icons as ARIA hidden, ensuring that screen readers ignore these decorative elements and focus on more meaningful content. This small change can greatly enhance the user experience for those relying on assistive technologies.

Underline All Links

Clear visual cues are essential for web accessibility. Underlining all hyperlinks within your website content makes it easier for users to distinguish links from regular text. This feature is especially beneficial for users with visual impairments or color blindness, who might struggle to identify links based solely on color. Underlined links stand out clearly, providing a consistent and accessible indicator for interactive elements.

Add Skip Navigation Link Option

Navigating through repetitive content, like navigation menus, can be cumbersome for keyboard users. The Accessibility Helper adds a skip navigation link option, allowing users to bypass the navigation menus and jump straight to the main content. This feature is particularly useful for users who rely on keyboard navigation or assistive technologies, making their browsing experience more efficient and enjoyable.

Fix Duplicate Menu IDs

Divi’s usage of the same menu for both primary and mobile menus can lead to duplicated IDs, causing validation and accessibility issues. The Accessibility Helper fixes these duplicate IDs, ensuring that each menu item has a unique identifier. This improvement enhances web accessibility by preventing navigation and interpretation issues for users relying on assistive technologies.

Enable Dropdown Menu Keyboard Navigation

Divi dropdown menus are not always easily navigable using the keyboard by default. The Accessibility Helper addresses this by enabling keyboard navigation for dropdown menus. This feature ensures that users can open and navigate through dropdown menus using their keyboard, promoting a more inclusive web experience.

Add and Improve Screen Reader Classes and Roles

For users relying on screen readers, properly coded classes and roles are essential. The Accessibility Helper adds and improves screen reader classes and roles throughout Divi, ensuring elements are correctly exposed to assistive technologies. It also reverses instances where Divi’s built-in screen reader classes use display: none, which can hide important content from screen readers. This enhancement ensures that your site is fully accessible to screen reader users.

Enable Browser Pinch and Zoom

Mobile accessibility is just as important as desktop accessibility. By default, Divi disables the ability to pinch and zoom on mobile devices, which can be a significant barrier for users with visual impairments. The Accessibility Helper re-enables pinch and zoom functionality, allowing users to adjust the size of content on their screens for better readability.

Add Tota11y Button

The Tota11y tool is a valuable resource for identifying and addressing accessibility issues on your website. The Accessibility Helper integrates a Tota11y button into your site (only for admins), making it easy to activate visual overlays that highlight potential accessibility problems. This tool helps you maintain and improve your website’s accessibility, ensuring a more inclusive experience for all users.

Automatically Use Alt Text In Divi Modules From Media Library

Some Divi modules do not automatically add or sync the alt text from the WordPress media library to the image in the module. Despite improvements over the years, there are still scenarios where the alt text is missing or not updated when changed in WordPress. Enabling this setting ensures that the alt text from the WordPress Media Library is automatically added and updated for images in the module on the frontend.

Ignore Alt Text In Divi Modules And Override From Media Library

This feature is handy when there is already alt text in the Divi module’s alt text field. Enabling this setting will override the existing alt text with the one set in the WordPress Media Library, ensuring consistency and accuracy across your site.

Use Image Title Or Filename If No Alt Text Exists

If the alt text field in the Divi module is empty, you can choose to automatically use the image title or filename from the WordPress Media Library as the alt text in the Divi module. This feature ensures that all images have descriptive alt text, enhancing both accessibility and SEO.

Media Helper Alt Text Features

In addition to the comprehensive accessibility features, Divi Assistant also offers robust alt text functionalities under the Media Helper section, which are crucial for improving website accessibility and SEO.

Automatically Use Alt Text In Divi Modules From Media Library

Some Divi modules do not automatically add or sync the alt text from the WordPress media library to the image in the module. Despite improvements over the years, there are still scenarios where the alt text is missing or not updated when changed in WordPress. Enabling this setting ensures that the alt text from the WordPress Media Library is automatically added and updated for images in the module on the frontend.

Ignore Alt Text In Divi Modules And Override From Media Library

This feature is handy when there is already alt text in the Divi module’s alt text field. Enabling this setting will override the existing alt text with the one set in the WordPress Media Library, ensuring consistency and accuracy across your site.

Use Image Title Or Filename If No Alt Text Exists

If the alt text field in the Divi module is empty, you can choose to automatically use the image title or filename from the WordPress Media Library as the alt text in the Divi module. This feature ensures that all images have descriptive alt text, enhancing both accessibility and SEO.

Continual Update & Improvements

At Pee-Aye Creative, we are committed to continuously improving the accessibility features of Divi Assistant based on valuable feedback from our customers. Since its release, we’ve been actively enhancing the plugin and adding new features to ensure it meets the highest accessibility standards while addressing all known issues. We invite you to check out our changelog for a detailed account of these updates. Your input is crucial to us, so please share any additional accessibility issues or needs you encounter. Together, we can make Divi more inclusive and user-friendly for everyone.

View The Product Page And Purchase

With Divi Assistant’s Accessibility Helper, you can significantly improve your website’s inclusivity and user experience. Each feature is designed to make your site more navigable and accessible to all users, ensuring compliance with Web Content Accessibility Guidelines (WCAG) and enhancing overall usability.

Ready to take your Divi website to the next level? Visit our product page to explore all the features and purchase the Divi Assistant plugin today. Make your website a more welcoming and accessible place for everyone!