Divi is a popular theme by Elegant themes. But is it up to code when it comes to web accessibility?

Does web accessibility really matter?

I’m writing a detailed article on this, but I’ll sum up 2 key ideas here. At least 1 of them should appeal to you.

Are you a jerk?

A quick Google search says that there are “as many as 10 million Americans” with vision issues and “48 million” Americans with hearing loss.

Don’t you like those people? Wouldn’t it be great if those groups could benefit from your website as much as anyone else?

Do you like money?

What is your website’s conversion rate? How many visitors do you need to make 1 sale? How many sales are you losing if millions upon millions of people can’t use your website?

This series’ goal

Divi is very popular. There are many web design agencies and freelancer who primarily use Divi for customer projects. I’m 1 of them.

In this series, I am going to identify any web accessibility shortcoming in the theme and its builder. Then I’ll see if there are any solutions or work-arounds for the problems I find.

How the testing will be done

I created a blank website, imported the WordPress theme test data, and installed/activated Divi. I have not made any changes to any of the settings other than adding my account info for theme updates. (Ok, I did change the permalink settings. I hate the default permalinks.)

Here’s the plan:

  1. Test the basic pages and posts using the test data.
  2. Test each Divi module on its own page.
  3. Test other Divi theme options such as the social icons in the header and footer.

Once the testing is complete, the site will be used for other Divi testing and tutorials.

The evaluations themselves will be done with WAVE (The Web Accessibility Evaluation Tool) from WebAIM.

Baseline

Page

Test link: http://wave.webaim.org/report#/http://divi.wpmasterbuilder.com/about/clearing-floats/

I tested the Clearing Floats page since it had an image. The image didn’t have any alt text (which is bad) but that’s because it wasn’t entered. That is not a issue from the theme.

No errors. 3 alerts. 1 contrast error.

Blog post

Test link: http://wave.webaim.org/report#/http://divi.wpmasterbuilder.com/markup-image-alignment/

This was the 1st post I found with a featured image.

No errors. 11 alerts. 2 contrast errors.

Blog archive

Test link: http://wave.webaim.org/report#/http://divi.wpmasterbuilder.com/2013/01/

I tested the date archive for Jan ’13 since that contains the post I tested.

No errors. 5 alerts. 1 contrast error.

Conclusion / Summary

All in all, the baseline is good. The Divi theme itself isn’t presenting any accessibility errors… so far.

The alerts are no big deal – things like redundant links or skipped headers. They’re things to be aware of but they aren’t show stoppers.

I am surprised about the contrast errors. I expected more due to the gray on black footer. Unfortunately, the tool doesn’t highlight contrast errors.

1 of the alerts is about a form missing its label, but it has a title so it isn’t an error.

Interested in the series?

Sign up below and I’ll send you updates. It’s nothing more than a weekly email automagically sending alerts about new posts. Nothing more.

* indicates required

I won’t sell, rent, trade, auction, peddle, or otherwise barter your email address.