Make Your WordPress Site Accessible With These Themes and Plugins

Make Your WordPress Site Accessible With These Themes and Plugins

I think we can all agree that technology has made our lives a lot easier, but what about people who are visually or hearing impaired and those who are color blind?

We spend a lot of time improving our websites, optimizing them for speed and creating quality content, but not enough attention is placed on site accessibility. Have you ever wondered how easy it is for people with disabilities to access your site and then navigate around it?

The importance of creating accessible websites is gaining much-needed traction in the WordPress community thanks to the WordPress Accessibility team. The team has been working with the Theme Review team on the possibility of requiring the accessibility-ready tag for themes hosted on WordPress.org. The Accessibility team hope to announced new guidelines for theme developers in April 2015, which would then be required as of November 2015.

So what does it take to create an accessible website? In this post I’ll go over some of the requirements in the WordPress Codex for meeting accessibility guidelines, as well as themes and plugins for improving your site’s accessibility.

Is Your Site Accessible?

To ensure your website is accessible, there are a number of required and/or recommended criteria you need to meet. All themes and theme updates that use the tag “accessibility-ready” undergo an accessibility audit against a number of guidelines, which you’ll find in the Theme Review Handbook. There are also more details about accessibility in the WordPress Codex.

For now, let’s go over the most important points you need to know now in order to score your site for its accessibility:

  • Headings should be used to define a page’s sub-sections and not simply for visual appeal
  • you should only have one h1 tag per page
  • Links should be descriptive and should make sense out of context (use “Continue Reading [Title of Post]” instead of “Read More”)
  • Buttons and (drop-down) menus should be selectable and highlight-able with a keyboard well as a mouse
  • Your page’s text color must be in high contrast when compared to the background color of the content area
  • The text should not refer to interactive elements such as links or buttons by color only
  • Your website should include skipping links at the very top of each page to allow users direct navigation to content with only a keyboard
  • The title attribute for links should only be used if the corresponding text would not be redundant when they are viewed side by side
  • Forms must be sufficiently labeled outside the form field and all confirmations and warnings should be easily recognizable
  • Images and icons should supplement text and content and should not stand alone without alt tags and very descriptive captions or titles
  • Media such as video, audio, sliders or carousels should not start or change action without user interaction by default
  • New browser windows or tabs should not be opened automatically, without user interaction

Plugins for Accessibility

There are a couple of websites that can help you test for some of these issues such as the Color Contrast Comparison and Tanaguru Contrast Finder sites. These are great, but there are many plugins to help you test your site and also help you achieve accessibility.

Let’s take a look at the most reliable ones.

WP Accessibility

wp accessibility header

WP Accessibility is a fantastic plugin because it adds many accessibility options in a single package. You can disable as many or as few options as you like if your current theme already has the same options included.

You can add skip links, a toolbar to toggle between high contrast, large print and grayscale views of your site, add long descriptions to images, add post titles to the standard “read more” links, and a lot more. While this won’t replace a solid theme that’s built for accessibility, it will certainly help a great deal making this a very valuable plugin.

Alt Checker

alt checker header

If the first plugin doesn’t fit well with your workflow or you’re otherwise not a big fan, you can try this one. Alt Checker is a plugin that also checks to make sure you have added alt text to your uploaded images. It’s super easy to install as well. The only major difference between this plugin and the Inaccessibility Checker is that the latter also checks for captions.

One Click Accessibility

one click accessibility

One Click Accessibility is a free accessibility plugin. It features the ability for users to skip to content, add an outline, include landmark roles, and more.

All of these features can make your site more accessible and SEO-friendly.

WP Accessibility Helper (WAH)

WAH header.

The WAH plugin helps tackle accessibility issues; including contrast, font size, images, and more. You can toggle accessibility features directly from the WordPress dashboard.

Web Accessibility by accessiBe

web accessibility

The Web Accessibilty plugin by accessiBe is an AI-powered service that was created to enhance accessibility. It helps any user with a disability by including AI scans and analyzing websites to learn what elements and functionality they include, and adjusting them.

Accessibility by UserWay

accessibility header

Trusted by millions, UserWays AI-Powered Accessibility Widget was developed to provide business owners comprehensive accessibility solutions. Some of their automatic recommendations include generated alt text, color contrast correction, undefined & broken link remediation, and more.

WP ADA Compliance Check Basic

ada header

The WP ADA Compiance Check Basic plugin was created to comply with Section 508 and WCAG 2.1 Level A/AA Web Accessibility Standards. It includes 76 individual error checks, and it evaluates content for web accessibility issues anywhere on your WordPress site.

Accessibility Widget

accessibility widget header

The Accessibilty Widget allows you to quickly put an accessibility panel on your WordPress site — for free. It will function on desktop and mobile. Plus, you can choose your text sizes and which page elements are affected by the widget.

WP Accessibility Tools & Missing Alt Text Finder

web accessibility header

With the WP Accessibility Tools & Missing Alt Text Finder plugin, you’re able to locate missing alt text, and check the contrast ratio, and it also includes a WCAG 2.1. compliance checklist.  Plus, there are a ton of resource links for additional information on web accessibility.

Accessibility-Ready Themes

Creating an accessible site from scratch can be difficult, but it doesn’t have to be with these fantastic themes.

All of the themes in this list have passed the Theme Review Team’s access

ada header

ibility audit with flying colors. This means they have at least the minimum requirements to be considered accessible by the visually impaired. If you are a theme developer, WordPress does encourage you to go above and beyond the minimum standards.

Don’t worry, though – even if one of these themes doesn’t surpass the standard, you can pair it with one or more of the plugins above to help you achieve a greater level of accessibility.

Simone

Simone header.

Simone looks as though it has a narrow content area, but it’s actually very roomy. It has large, clean fonts for an easy reading experience and its menus are fully accessible by keyboard. If you don’t like the sidebar, you can opt for a full-width page template instead. You can change the color scheme, background, and all that good stuff. It also has all the major post formats, sticky posts, and threaded comments.

Cherish

cherish header.

If you’re in need of a theme that has a large call to action (CTA) area, then Cherish has you covered. It also features some pretty fanciful fonts that screen readers won’t have trouble detecting, but are also eye-catching for those with 20 / 20 vision. It’s a minimalist theme that focuses on content with a clean, full-width layout. Sticky posts and threaded comments are also included.

Universal

universal header.
The Universal theme has a rather unique feature to it which makes it shine among other themes. It has extensive in-line documentation on its accessibility features. This can act as a resource in and of itself to help you further understand how to make your site accessible. It has a good number of theme options to help you tweak the style to your liking along with the sticky post feature.

Final Thoughts

Ensuring your WordPress site is accessible may seem like a lot of work, but the benefits are worth it. Not only will you make your content more available to those with disabilities, but you will be opening up your site to a larger audience.

The plugins and themes in this list provide a great start to get you thinking about how to improve your site’s accessibility.

The Theme Review Team’s accessibility guidelines provide a neat overview of the requirements websites should meet. If your site doesn’t already meet these guidelines, it’s worth thinking about how to put them in place – the accessibility movement in WordPress is gaining traction and you don’t want to be left behind or discriminate against potential readers of customers.

What did you think of these plugins and themes? Do you have any favourites that I've missed? Post them in the comments below.
Tags:
Jenni McKinnon
Jenni McKinnon A copywriter, copy editor, web developer and course instructor, Jenni has spent over 15 years developing websites and almost as long for WordPress. A self-described WordPress nerd, she enjoys watching The Simpsons and names her test sites after references from the show.