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.

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.

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 this snippet to the functions.php file in your child theme. Make sure to increase the maximum-scale value from 2.0 to 5.0.

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:

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.

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.

💡 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”.

💡 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.

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 at Divi Marketplace for $49.99 per year.

The link above is an affiliate link. 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 Codex » 

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