One of the biggest concerns facing any Divi website owner or designer is accessibility, ensuring all users, including those with disabilities, can navigate and interact with your content effectively. This is a serious issue, especially with more and more laws being passed all over the world and various lawsuits taking place. While no one can claim that any tool will make your website 100% legally compliant, we can do our best to achieve as close to that as possible by addressing all known accessibility issues in Divi. In this blog post, we’ll explore the powerful features of the Accessibility Helper in our Divi Assistant plugin that helps you align your site with Web Content Accessibility Guidelines (WCAG) and create a more user-friendly experience.
▶️ Please watch the video above to get all the exciting details! 👆
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.
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!
0 Comments