Are you using the best tools for WordPress accessibility?

While web accessibility isn’t a new concept, it still quite new (or at least newish) to many of us. As site creators, developers, and content writers, we may want to make the web a more accessible place, but are not sure where to start.

In this article, I’ll focus on the best tools (plugins and themes) you can use to make your WordPress site more accessible. I won’t focus on the specifics behind accessibility, but if you’d prefer some background, read this article first.

The good news is, these tools don’t need a single line of code.

The Core of Web Accessibility

Good accessibility is the combination of many things done right. The goal is to move forward in a direction of better accessibility, realizing that (unless you’re legally obligated) your site will be an ongoing work in progress.

For a WordPress site, the core elements that determine whether your site can pass an accessibility check are:

1. Your content
2. Your theme

Getting the best results is a combination of practicing good content creation habits and using an accessible WordPress theme. Where either your content or your theme fall short with accessibility, we use WordPress plugins to cover the gaps.

In the rest of this article, we’ll look at the best accessibility plugins to use, as well as a few themes that give you a great head start on accessibility.

WordPress Accessibility Plugins

There are two (free!) WordPress plugins that do the heavy lifting when it comes to supplementing the accessibility of your site:

• WP Accessibility – For use with any WordPress theme
• Genesis Accessible – For use with any Genesis child theme

The reason there’s a Genesis-specific plugin is that the Genesis Framework uses extra structural hooks than what’s included in a “regular” WordPress theme (i.e. a theme from the WordPress repository). That means that some WP Accessibility Features don’t work with Genesis, in which case, Genesis Accessible steps in to finish the job.

Let’s break these plugins down.

WP Accessibility configuration options

The bottom line? Use this plugin!

Some quick points:

• First: This plugin works fine with Genesis Accessible and any WordPress theme. You can safely use them all together.
• Second: As mentioned, there are some features that do not work for  Genesis themes. Nothing bad happens if you enable them; they just don’t do anything.

The screenshot below shows all the features of WP Accessibility and highlights those in red that don’t work with Genesis.

If you’re using a screen reader on this post, here’s an interpretation of the WP Accessibility features that don’t work with Genesis themes:

• Add Skiplinks
• Add language and text direction attributes to your HTML attribute
• Add an outline to the keyboard focus state for focusable elements.
• Remove the target attribute from links.
• Remove title attribute from images inserted into post content and featured images.
• Remove redundant title attributes from page lists, category lists, and archive menus.
• Add post title to “more” links. Continue reading text.

WP Accessibility has great documentation outlining what each feature does. I’m won’t reinvent the wheel, so head over here to learn more about WP Accessibility features. Suffice to say, this is one of the best accessibility tools you can add to your toolbox.

Genesis Accessible configuration options

If you’re not using the Genesis Framework, you can skip this section. If you are using Genesis, I recommend using this plugin!

This plugin works fine with any child theme for Genesis. Use it safely with any Genesis theme and the WP Accessibility plugin (there’s no conflict).

The screenshot below shows available settings for the plugin. These settings apply to sites running up to Genesis Framework 2.1.

In case you’re using a screen reader and can’t see that image, here’s a run down of available settings for Genesis Accessible:

• Remove the title attribute from links
• Add skiplinks
• Add CSS for skiplinks
• Use a semantic heading structure
• Add keyboard accessibility to the dropdown menu
• Remove Genesis-specific widgets that aren’t very accessible
• Add post title to read more links
• Remove H1 from the editor toolbar (you know, just to get rid of temptation)

At a minimum, I recommend enabling skiplinks (and skiplink CSS) and removing the title attribute from links. I’ll discuss some additional recommendations and my reasoning later in this post.

For a better understanding of what each of these features does, check out the plugin documentation.

Accessible WordPress Themes

Okay, so we’ve covered two fantastic plugins to give you a big push toward a more accessible website. Next, let’s look at the best accessible themes.

I’ve mentioned before that choices are extremely limited when it comes to accessible WordPress themes, but I’d like to highlight three terrific options: one is for regular ole WordPress and two are for Genesis.

Simone

You probably already know I’m partial to Genesis, but when it comes to non-Genesis themes, I really think Simone is best in class. It’s created by Morten Rand-Hendricksen, a respected voice in the WordPress community who’s quite passionate on the topic of WordPress and web accessibility.

Simone is available for free from wordpress.org. It’s a perfect theme for a content-focused site and includes an accessible menu, font scaling, and meets all the requirements of a WordPress accessibility ready theme.

Use with: WP Accessibility plugin

Leiden

Leiden is the first publicly-available accessible Genesis theme. It’s created by Rian Rietveld, another vocal supporter of WordPress accessibility. Rian is also the author of the Genesis Accessible plugin, so Leiden is an example theme meant to show how the plugin and a theme complement each other.

Leiden is available for free at genesis-accessible.org and is essentially an accessible version of the Genesis Sample theme (for example, as of version 2.1.2 of Genesis Sample, the theme colors don’t meet minimum contrast requirements, a problem fixed in Leiden). While the theme is minimal, it’s a great starting point for picking apart the theme styles and seeing where they differ from Genesis Sample.

Use with WP Accessibility plugin and Genesis Accessible plugin (enable all options for full accessibility)

Utility Pro

If Leiden is the first accessible Genesis theme available, Utility Pro is the first premium accessible Genesis theme. It’s created by me (yes, you can call this part self-serving, but I created this theme out of a need in the WordPress marketplace for greater choice and am extremely proud of its accessibility features).

Utility Pro is available in several licensing options. It includes multiple color options (all meeting accessibility requirements), skip navigation, keyboard navigation for drop-down menus, and more. Basically, Utility Pro incorporates all the features of Genesis Accessible except those that can change the look of a theme (i.e. using a semantic heading structure).

It’s my opinion that those features should be available on demand (via the plugin) to improve accessibility while not creating unexpected visual changes on the front-end of a site.

The theme looks great right out of the box (okay, I’m biased), but works great as a starter theme for developers.

Use with WP Accessibility plugin and Genesis Accessible plugin (here are my suggested configuration options for using Genesis Accessible with Utility Pro)

You’ve Got the Right Tools for the Job

Do you have enough information to get started with creating a more accessible WordPress site for yourself or for a client? If you’d like a topic covered in more detail, please leave a suggestion in the comments.

Want to know more? Check out the last post in this series: The Business Case for Web Accessibility.