Skip to main content

The Build – Day 1

Network foreground in front of a cityscape

We decided not to do a fully custom build, because we don’t always do fully custom builds for clients. We wanted to know what it would take to make our favorite theme, which also happens to be one of the highest selling themes on Theme Forest, compliant with the WCAG 2.0 Accessibility Guidelines.

Here’s what we started out with for our build:

We decided to use BeTheme for this build. It’s one of our all time favorites, and we recommend it to just about every client. It has almost anything you can thing of already built in, and they’ve also integrated a lot of other features which were previously only available through paid plugins. It’s $59 for a license, but it’s well worth it when you consider how much is being saved in development costs.

  • Visual Composer – We wanted to stick with a page builder that’s not theme-specific and very well documented. BeTheme has a pretty good page builder, but if you change themes, you lose your page content. We’re also certain that since it runs in place of the standard WordPress editor, it’s compatible with…
  • Yoast! Which we chose because, well, it’s Yoast. Since Yoast doesn’t link up to your Google Analytics anymore, we chose…
  • Google Analytics by Monster Insight – they actually took this portion of the plugin over from Yoast, so that’s one less compatibility issue we have to worry about.
  • Slider Revolution – it’s great, has tons of add-ons available, came included with BeTheme and can be adjusted for accessibility with very little code knowledge.

So, after we installed BeTheme and the aforementioned plugins, we imported one of the 290+ available BeTheme layouts and then ran a scan on it using the WAVE tool. Our results weren’t great, but we didn’t expect them to be. Honestly though, they weren’t as bad as they could have been.

This report is just for the homepage, and shows 36 errors and 25 alerts. It also shows 178 Features, 54 Structural Elements, and 211 HTML5 and ARIA tags, which are used by screen readers to guide visually impaired users through your site. We aren’t too worried about the 108 contrast errors because that’s all design and will be cleaned up as we build this out to be OUR site.

If your site has 108 contrast errors, you should probably have someone take a look at that for you. It makes it really hard for anyone with any degree of colorblindness to use your site.

WAVE report for our "out of the box" homepage.

Our First Compliance Issue During Build

Our first impasse came when we ran the evaluation on this post after publishing it. We’ve found that the Accordion element above publishes it’s headers as <H4> elements, and we have no built-in control over this. With the absence of an H2 and H3 between the H1 and H4, this is semantically incorrect per the WCAG 2.0 accessibility guidelines. We’ll either have to replace this, or find a way to fix it.

Oddly enough, the headline above this that reads “Our First Compliance Issue During Build” is also being published as an H4. This seems to be the default for Visual Composer elements and will need to be addressed.