Accessible WordPress Themes

So, if you already have a theme and you don’t want to change it, how do you check if it is accessible?

There are tools that can help with testing accessibility, but they are mostly useful if you know how to install them and you have the time to learn how they work.

There are tools that are fairly easy to use, and tools that are highly advanced. I will cover that in more detail in a different post later.

I made a short video of a recent review that I made, just so that you can get a better idea of how I do reviews.

This was the first time that I recorded a review, and I also missplaced my popfilter, so I’m sorry. 🙂

This review was requested by the theme author, and recorded before they made any necessary changes. So please don’t hold it against them <3 .

How you can do a basic review without tools

You can do a basic check yourself without having to install a screen reader, WordPress plugins or browser addons.

-Even this quick check, -and of course; fixing any problems you might find, can improve the experience for you and your visitors.

The first thing you can do to check if your theme and your website is accessible is to look at the colors:

If there are any text colors on your website that you find too bright and a little more difficult to read than the rest, –then you are probably right, and other visitors will experience it too.
If there is text that uses red or green, consider changing this to a different color. Red and green can be difficult to read for color blind visitors.

Check if all your links are clearly visible. Make sure that you can see the difference between regular text and links. The easiest way to make links visible, is to add an underline.

You can use the Tab key to test if links and menus are working for screen readers and sighted users who navigate the web without using a mouse.

In this animation I place my mouse pointer in the browser adress bar, and press the tab key. When I press the tab key, the link with the text “More information…” is selected and a blue border is added to the link.

This is important because it means that the link can be focused on, and I can tell where I am on the page.

When I press the tab key, the link is selected and has a blue border.

To repeat this test on your own website:

Place your mouse pointer in your browsers adress bar, then press the Tab key.
The first link on your page should now be selected. If this link says “Skip to…” then your theme also uses a skip link, which is great. Press Tab again and find the next link. It should have a blue border around it (depending on your browser).
Press the tab key until you reach your menu. Now test if the menu works with they keyboard only. All sub menu items should show when you navigate with the tab key.

Next, check your images and videos.

Would your website content be readable and understandable if images and videos were removed?
Have you used alternative texts for all non decorative images?

When you add images to your content in WordPress, you have an optional field to add an alt text and a title.

In case you need to add alt texts to images that you have already added, select the image in the media library or the editor.

To test your forms, you want to look for visible labels. Open a page with a comment- or contact form, if you have one.

There should be enough information and instructions so that visitors can fill out the form.
Fields that are required needs to be obvious and marked with more than a color change.

Here is an example of an excellent form that has visible labels:

The form below is much more difficult to use. It is missing labels and is only using placeholder textd that is removed when the visitors select the field. The contrast is also too low -can you read the text on the submit button?

A bad example of a form. The form is missing labels, and uses white text over yellow background that has a too low contrast and is difficult to read.

I hope these examples have been helpful.

The first form is from one of the official themes: Twenty Seventeen. And the second form is from a random theme (literally the first theme I clicked) on the market place ThemeForest.

There are accessible themes available on both market places and I will give you examples of how to find good themes in the next post.

I hope that I have been able to convince you that you can do these quick tests yourself and make a difference.

And don’t forget that the theme should also be easy for you to use. After all you are the person who will be using it the most.

My recommended reading list:

Karl Groves: The 6 Simplest Web Accessibility Tests Anyone Can Do

The most important reason for selecting a WordPress theme that is accessible, is that more people will be able to use your website.

An accessible theme is a great start for your website. Accessibility is especially important if you have a shop or if you are using signup or contact forms. But also if you have important information that needs to be made available to your community.

For many organisations, churches, schools and medical professionals, an accessible website is necessary to make sure that the targeted audience can access the information that they need. Information that you want them to read.

The right theme will help you by making sure that visitors can navigate the website without problems. It will also make your content easier to read with the help of color contrast, semantic HTML and correct headings.

As a bonus, accessible WordPress themes are great for SEO, because they are easier for search engines to read.

Basic features that are expected of accessible themes:

Navigation that is usable without a mouse (including dropdown menus).
Skip Links which helps visitors go directly to the content.
ARIA roles which helps users identify different parts of the website.
Links that can be easily discernible from other types of texts. Either with a text decoration or a high color contrast.
Forms with clear labels for input fields and semantic controls.
Alt texts for images when it is needed.
No auto-starting media like sound or video (or slides).
A high color contrast between background and text which increases the readability.

Themes with these features will make it easier for you to make your website accessible, but it is also important that you make sure that your content is accessible.

On this website, I will try to help you select a theme that will work for you, so that you can set it up and continue to improve your site, without having to become an expert on accessibility.

Next: What does accessibility-ready mean?

My recommended reading list:

wpmudev: Claire Brotherton has written a comparison explaining the difference between a theme that is accessible and one that is not. (2017)