Web Accessibility for WordPress themes

Web Accessibility

We spent much of our time in the first post (see here) talking about the need for Web Accessibility as well as how to implement for content.

In this article, we are going to look at implementing from a theme perspective, as much as possible.

I use a wireless mouse. I use two of them, one at home and one when I go to the coffee shop. Each one has one of those little things that go into the USB port.

Every Thursday, I have a Google Hangout with a colleague. When I have the hangout, I have to unplug one of the nano-receivers for my microphone. I think I need a new microphone.

I took the nano-receiver out yesterday to plug in my mic and forgot to put it back in.

The next day, when I set up at the coffee shop, my mouse was useless.   🙁

I felt pretty frustrated.

It is a small inconvenience, but it reminded me how it may be for a visually impaired user trying to use a website without the ability to navigate properly; without Web Accessibility enabled navigation.

How can you implement Web Accessibility from the theme side of your website?

There are a couple ways implement Web Accessibility from a theme perspective.

First, you can apply Web Accessibility by utilizing plugins.

Second, you can perform Web Accessibility by using a theme that is already web accessible.

WP Accessibility Plugin

If you have decided you are going to implement some of the Web Accessibility standards, you can simply install WP Accessibility, a plugin by Joe Dolson.

If you are using a Genesis theme, there is a plugin that works with your Genesis Framework and the WP Accessibility plugin called Genesis Accessible.

The plugin addresses many of the issues that come from the requirements page for WordPress.

I want to mention three areas where the plugin can improve your WordPress website for accessibility.

Skiplinks

Web Accessibility means implement certain code to create a focus for those who are vision impaired. As a result, to be accessibility, we have to make sure that our websites have the necessary code to navigate our website using the keyboard.

Using skiplinks is one of the ways to accomplish focus.

Skiplinks are a means to help users of screen readers jump from the beginning of a page to another section of the page.”

The WP Accessibility plugin will allow WordPress developers enable skip links.

There are several ways that a website can accomplish being keyword focused.

Alt Attributes

We have actually been using alt attributes for a long time with to help our SEO efforts. If Alt Images are good for SEO there is a chance it is useful for Web Accessibility as well.

A screen reader reads what’s on the page for those with accessibility needs. They can’t see our cool image or graphic. Therefore, they need us to use Alt Attributes so that the screen reader will read to them the kind of image on the page.

The WP Accessibility forces the addition of Alt Attributes. This means, when you add a picture, it will force you to add a description of the image.

Color Contrast

Users who have accessibility needs may still be able to see but struggle with color blindness or poor eyesight.

WP Accessibility provides an easy-to-use color contrast test. You simply put in the color hexadecimal of your text foreground and background and will let you know your site passes the test.

If you are using a Genesis theme, there is a plugin that works with your Genesis Framework and the WP Accessibility plugin called Genesis Accessible.

New Theme

If your theme was developed several years ago, it might be a good idea. The WordPress repository now has several themes that are tagged as accessible-ready having passed an accessibility test.

For My business website, I am using Carrie Dils’ Utility Pro Theme. One of the reasons I did was because of accessibility issues. Frankly, I went back and looked at the settings after working on these articles and realized I was not using some of the most basic concepts for web accessibility.

Guess what I’ll be doing in December.

The Utility Pro Child Theme for Genesis is worth a look if you are a Genesis developer. There is another Genesis Child theme called Leiden by Rian Rietveld.

Web Accessible-ready themes will begin to be a hot topic and buzzword over the next couple of years. I believe that premium theme shops will start creating and selling Accessibility-ready themes as the WordPress community becomes more aware.

While you can do a search for and find Web Accessible-ready themes, it is always best to test the demo.

My advice would be to download a Web Accessibility theme from the WordPress repository on a local install and start testing and evaluating.

Conclusion

To make your website Accessibility-ready, you will still have to do your part. Remember, part of making a site Web Accessible is following best practices with your content which exist aside from your theme.

Of course, I am not an expert. I dug into this topic like I would as a journalist. However, I have the ability to look at my own “house,” you know my own website.

There are many advocates for Web Accessibility in the WordPress community.

Three I am aware of is Rian Rietveld, who built the Leiden theme I mentioned earlier, Joe Dolson who created the WP Accessibility plugin, and Amanda Rush of Georgia who is involved in testing for Accessibility for WordPress and consults companies looking to be more Web Accessible.

According to Rietveld, WordPress has a team to help with Web Accessibility issues. The team is made up of working groups that address the Core, Documentation, Themes, Meta Trac, WordPress Themes, and Test.

It truly a remarkable effort.

You may not make your websites by next week, but consider diving in and learning about Web Accessibility and how you can improve your websites and your client websites.

If you want to do more research using Twitter, the hashtag that is being used is #a11y.

Good luck with your journey!

2 thoughts on “Web Accessibility for WordPress themes”

  1. Hey Todd,

    Thanks for the shout out!

    A couple of updates re: Genesis. The Genesis Accessible plugin is no longer necessary for any of their themes created within the past couple of years (Genesis + most child themes now incorporate those accessibility options).

    Rian’s theme Lieden is deprecated as those accessibility features are now included in Genesis Sample theme (https://github.com/studiopress/genesis-sample).

    Cheers,
    Carrie

    Additionally,

Comments are closed.

Looking for something?

Your Download Is Just One Click Away

…or just download the plugin.

By entering your email, you agree to our Terms of Service and Privacy Policy.