Accessibility is an often overlooked factor when optimizing a Divi website. But a good accessibility is important if you want your website to work for all users regardless of impairments. And it’s also a factor in your Google PageSpeed results.

If you scroll down past the Performance section in your report, you’ll see your Accessibility score on a scale from 0-100 and a list of opportunities to improve the accessibility of your website. Spoiler alert! In this post, I will  show you how to go from 66/100 to a perfect 100/100 using Divi with no plugins or paid services at all.

According to Victor Tsaran, the Technical Program Manager at Google, accessibility consists of four categories: Vision, Motor/dexterity, Auditory and Cognitive.

Planning for accessibility means thinking about users who are experiencing some type of impairment or disability in one or more of these categories. Bear in mind that that experience might be non-physical or temporary—for instance, trying to read a screen outside during a bright, sunny day or operating a device one-handed while carrying a cup of coffee.

Measuring Your Accessibility Score With One Click

If you are a website owner, you have probably already analyzed your page speed score on Google PageSpeed Insights. But the report tells you a lot more than your page speed performance as you also get reports on Accessibility, Best Practices and SEO.

If you scroll down past the Performance section in your report, you’ll see your Accessibility score on a scale from 0-100 and a list of opportunities to improve the accessibility of your website.

Is Divi Good For Accessibility?

I’ve tested a bunch of Divi websites and the Accessibility score often ranges from 60-85 out of 100. But it’s not fair to entirely blame these scores on Divi alone since much of the responsibility lies at the web creator using the tool.

For example, you need to choose high contrast colors in your design to ensure a good experience for users with low vision. And you need to add alt texts (alternative texts) to images that describes the appearance or function for visually impaired users that use screen readers.

As I will show you below, it’s pretty simple to bump your accessibility score to 100/100 using Divi.

Tutorial: Going From 66/100 to 100/100 Accessibility Score With Divi

I installed a clean Divi website without any plugins or custom code. Then I imported the free Book Club layout pack from Elegant Themes.

Now it’s time to run the Google PageSpeed Insights test to get our baseline result. The Accessibility score was a not so impressive 66/100.

The Accessibility report highlights four critical areas where we can improve our score: Best practices, Contrast, Names and labels and Navigation. Let’s fix them one by one!

1. Enable zooming and scaling

The report tells me that [user-scalable=”no”] is used in the <meta name=”viewport”> element or the [maximum-scale] attribute is less than 5.

This might sound very technical and confusing but it means that zooming is disabled by default in Divi and that can be “problematic for users with low vision who rely on screen magnification to properly see the contents of a web page”. According to Deque University, it’s critical that “zooming and scaling must not be disabled” according to WCAG 2.1 Best Practice.

How to fix it

First, you need to make sure that you have an active Divi child theme. Then, add the snippet below to the functions.php file in your child theme.

// Allow scaling to improve accessibility

function remove_my_action() {
remove_action('wp_head', 'et_add_viewport_meta');
}
function custom_et_add_viewport_meta(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />';
}
add_action( 'init', 'remove_my_action');
add_action( 'wp_head', 'custom_et_add_viewport_meta' );

This will allow scaling up to 5 times.

The result: From 66/100 to 85/100

Woop woop! We climbed 19 points from 66 to 85 with this single action. Let’s climb some more.

2. Improving the colors contrast ratio

The second critical accessibility problem reads: Background and foreground colors do not have a sufficient contrast ratio. Furthermore, it says: Low-contrast text is difficult or impossible for many users to read.

Well, this is pretty straight forward: Don’t use light text on light background or dark text on dark backgrounds.

If you expand the result tab, you will get a list of failing elements:

In this case, it’s pretty clear that the medium light shade of pink-red can be hard to read on light background.

How to fix it

We need to change the pink-red color #ff5d67 to a color that has better visibility on light backgrounds.

I’ll head over to the Color Contrast Analyzer from Deque University and enter the foreground color #ff5d67 and the background color #f2f2f2. The result is an epic WCAG Standard AA and AAA fail for all sizes.

I’ll use the handle to reduce the foreground color lightness until I pass the test AA test for small text and large objects. The result is the color #e0000f.

Now I’ll use the nifty Find & Replace feature in Divi to search for #ff5d67 and replace it with #e000f in all elements on the page. If you use the powerful Divi feature Global Colors you can easily switch colors sitewide with just a couple of clicks.

💡 Pro tip: Another service is Encycolorpedia where you can enter your HEX code and get a ton of nerdy facts about it (the pink-red color from the Book Club layout has a wavelength of 618.04 nm!) but it will also offers alternative colors that are “darker”, “more saturated”, “inverted”, “web safe” and “closely related”.

The result: From 85/100 to 91/100

Oh yes, we have finally entered the green zone with a well deserved additional 6 points. But why settle for good when we can go for perfect?

3. Adding discernible names to links

The third accessibility issue is: Links do not have a discernible name. The report tells us that “link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users”. That makes sense, right?

In this case, the logo in my main menu doesn’t have an alt text. This means that blind or visually impaired users will not be able to understand the meaning of the image if they use screen readers. Alt texts are also an important factor for SEO. Let’s fix that!

How to fix it

I’ll head over to my WordPress Media Library and I’ll click the my logo image. Now I can add a descriptive Alternative Text (alt text). In this case, I’ll use the site name DiviMundo as alt text. Just close the popup to save.

If your Divi Image modules are missing alt text, you can add it either via the Media Library or directly in the Image module Settings in the Advanced » Attributes » Image Alternative Text field. This gives you the opportunity to use different alt texts for the same image in different contexts.

💡 Pro tip: Images that are purely decorative should just have an empty alt text (so that they can be ignored by screen readers). Background images will not display any alt text since they are displayed with CSS and not HTML.

The result: From 91/100 to 96/100

We’re getting closer to the top with an extra 5 accessibility points. The finish line is within sight!

4. Organizing heading elements in order

The last accessibility issue is about navigation and it says: Heading elements are not in a sequentially-descending order. The in-depth description says: “Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies”.

In HTML you can separate headings using tags from H1 (the main heading) to H6. Most sites only use 3-4 levels of heading (H1-H4). All pages should have one (1) main heading (H1). The rest of the headings should be ordered hierarchically. Deque University clarifies: “For example, the heading level following an h1 element should be an h2 element, not an h3 element.”

💡 Pro tip: Ask yourself: Is this really is a heading? Would you you use it in a table of contents section? If not, it should probably be wrapped as regular text in a paragraph instead. You can still style it the text like a heading, but from an accessibility perspective, heading tags should only be used for headings that are meaningful. Keep in mind that HTML (for example H1-H6 tags) should provide structure while CSS (font size, font weight and color) is all about the visual design.

How to fix it

In this case, the Divi Blurb module is an issue since it uses H4 headings by default. To change this, I simply open the settings for the Blurb modules and I go to Design » Title Text » Title Heading Level and I choose a more suitable heading level, for example H2 or H3.

Next, I’ll change the H4 headings to H2 headings in the Text modules in the footer. This is slightly different process compared to the Blurbs: Go to the Content tab and highlight the heading text. Now, click the text format dropdown and select the suitable heading level.

The result: From 96/100 to 100/100 🥳

We did it! The last 4 points gained us a perfect accessibility score. Let’s celebrate! And then let’s talk about why this still isn’t good enough.

Next Step: Being WCAG2 Compliant

Even though a perfect accessibility score from Google might be good enough for many website owners, there are exceptions. There are sectors and countries where your site has to be WCAG2 (Web Content Accessibility Guidelines version 2) compliant by law.

To achieve this with Divi (or any WordPress theme) can be complicated and often demands lots of custom coding. But hey, do not despair! There is a more convenient solution.

Divi Accessibility Helper – the ultimate plugin to make Divi Accessible for all

Divi Codex has produced Divi plugins since 2016 and their latest one is called Divi Accessibility Helper.

Divi Accessibility Helper helps you make your website WCAG2 compliant by adding a long list of accessibility options in the Divi Theme Options. Why code when you can flip a switch?

Divi Accessibility Helper Pricing

Divi Accessibility Helper is available for 1 year unlimited website usage for $49.99 at Divi Marketplace.

Another vendor that sells the same plugin is Divi Cake that offers four different Divi Accessibility Helper licenses:

• Single site – 1 year: $24.99
• Single site – lifetime: $49.99
• Unlimited sites – 1 year: $49.99
• Unlimited sites – lifetime: $129.99

The links above are affiliate links. That means that I will get a commission if you purchase something but it will never cost more for you. Thanks for your support!

Divi Accessibility Helper Features

Here’s the list of features provided by the plugin developer.

• Use Alt Text From Library:  Automatically update Alt text for images on the front end when it gets updated in WordPress Library.
• Use Title Text From Library:  Automatically update Title text for images on the front end when it gets updated in WordPress Library.
• Enqueue Inline Scripts and Styles: Disable inline Scripts and Styles. Instead, Enqueue Scripts and Styles files to the theme.
• 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
• 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 the 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.
• Tota11y 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)
• An option to enable browser zoom to allow visually impaired users to read the text of the website.

Read more at Divi Cake » 

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: Why I Removed Google reCAPTCHA v3 (And Why You Probably Should Too)

👉 Free course: Create a website from scratch with Divi