WCAG 2.1 AA Conformance for Divi Website

Elevage Digital recently completed a custom remediation project for Fredericksburg Economic Development to bring their News site, built with Divi, into conformance with WCAG 2.1AA in order to meet new federal regulations.

The Challenge:  Achieve WCAG 2.1AA Conformance for a site built with Divi Theme and PageBuilder

Accessibility issues can be a result of the design (ex. insufficient color contrast), code (ex. lack of keyboard operability) or content (ex. missing image alt text).  The Divi theme and page builder produce sites that are inherently inaccessible and they require a significant amount of custom remediation to overcome.  Additionally, this site includes several forms (not powered by Divi) that required custom remediation in order to meet WCAG 2.1 AA.

The Solution:  Multiple Approaches To Testing and Remediation to Address Each Type of Issue

Before diving into the solution, it was important to know the full extent of the issues that needed to be addressed.  To accomplish this, we ran the Accessibility Checker full scan on the site in addition to performing manual testing with a keyboard and screen reader.   The automated scan found 802 unique issues.  Additional automated testing tools and manual testing revealed a handful of additional issues.

Fix Divi A11y Plugin

The first step in remediation was to apply the Fix Divi A11y plugin.  This plugin fixes all of the following issues:

• Skip Link Missing
• Zoom and Scaling Disabled
• Drop Down Menu not Keyboard Operable
• Focus Indicator Missing
• Ambiguous “Read More” links in Blog Module

After applying the plugin, the number of unique issues found by the automated scan dropped to 731.  The plugin primarily addresses issues found through manual testing.

Color Contrast and Other Color-Related Issues

Next we addressed color contrast errors and other color related issues.  Compared to many sites, the color contrast issues were not as severe or extensive.  We were able to clear up issues by reducing the opacity of the background color for navigation items on hover, darken the error message color on forms and darken, darken the borders around form fields and darken the background behind white heading text. 

Additional Manual Remediation for Theme and Template Code

We wrote custom JavaScript to address a number of code-level issues, mostly stemming from the code output by Divi and Toolset. These include

• Adding a label for the search form
• Adding an appropriate aria role for the sidebar content on interior pages
• Remove the tabindex for blog images to create a better experience for keyboard users
• Adding an aria label and description to the select list to view news by topic that explains that this feature takes users to a new page
• Adding an aria label to the event “Website” link
• Adding aria labels to nav tags
• Adding a nav tag around the mobile navigation menu
• Removing an inaccessible date filter for events
• Adding proper labels for event filter fields
• Adding autocomplete attributes to fields on the email sign-up form
• Improve the coding of checkboxes and hidden fields on the email sign-up form

Additional Content Remediation

After addressing code and color issues, there were still a number of issues that existed within the content of individual pages and posts.  These included:

• Missing alt text for image
• Missing table headings for a data table
• Missing HTML headings, HTML headings in the wrong order (ie. H3 before an H2) and HTML headings that skip a level (i.e H1 followed by H3)

After applying these fixes, the number of unique errors dropped to 177. 

Videos

The site contained 77 embedded YouTube videos that did not have captions or transcripts.  Since these videos were old, the client made the choice to remove this content from the site.  This brought the number of unique errors down to 17 

Submit an Event Form

The source of the remaining issues was their Submit an Event form.  Unfortunately, the output of the form tool included a number of elements that do not meet WCAG requirements, including date pickers that are not keyboard operable, missing alt text for map images, elements that function as buttons but are coded as links, no visual or programmatic indicators for required fields and insufficient color contrast for field borders and error messages.  We removed the offending features, added visual and programmatic indicators for required fields, darkened the field borders and error message text and added autocomplete attributes for several of the fields to make it easier for people to complete the form. 

This brought the number of unique errors down to 0.

Final Review

After all of the remediation work, we did one final manual review with screen readers and additional automated tools to confirm conformance with WCAG 2.1AA to the best of our ability.  The Accessibility Statement was updated to reflect the status of the site and includes contact information if a user does encounter a problem using the site.

While it is possible to make a Divi website conform to WCAG, it does take a large amount of custom coding and some potentially difficult content decisions.