Getting started

Checking if your theme is accessible

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:

  1. Place your mouse pointer in your browsers adress bar, then press the Tab key.
  2. 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).
  3. 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:

Example form with 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