Wading into WAVE: 30 Days of Accessibility Testing

by | Syndicated

The Ministry of Testing has declared that May should be “30 Days of Accessibility Testing”. As in the days of yore when I used to take on these challenges and blog regularly, I’m in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist. Today, let’s look at #2.

2. Use a tool like WAVE to scan a page for Accessibility problems.

Almost everyone that starts with Accessibility testing at some point early in their learning comes across WAVE. There are lots of good reasons why. First, it’s a standalone page. Second, it’s simple to get started. Just go to the site, put in the URL and Submit.

Ahh, but that’s just the beginning :).

WAVE main page image
Let’s try an experiment. How about we choose a page that’s relevant to me? Heck, why not this blog? What would happen if I did a scan for http://mkltesthead.com/?
Looks like the answer is “there are a lot of issues” with my blog as it relates to Accessibility.
Let’s start with the most obvious. 
  • It looks like most of the images being displayed do not have “alt” tags.
  • The language of the page is not identified.
  • Form elements are not labeled (the search bar is my guess)
  • Lots of redundant links. This is a blog, so that may well be unavoidable, but it’s still worth looking at. In this case, the redundant links are the tags I use for each post. Repetitive? Yes. Necessary? Arguably, yes.
  • Contrast is low (I admit, I like the layout of my site, but it’s a good bet that for color blind individuals it may well be hard to read).
I hear you all. You are thinking “OK, that’s great, but so what?” Well, now I have a clearer idea of elements about my site design that I might want to change. Some I will have a hard time changing as they are part of the Blogger platform and templates, but many I can change since there are elements of the template that I can modify directly.

Redesigning my blog is not part of today’s challenge, but just by doing this little bit, I’m seeing areas that I can directly control and changes I can personally make that can enhance or better the user’s experience as Accessibility is concerned.

Updated: After I originally wrote this, I took a look at the contrast issues and determined where I could make a few changes. Just by picking a brighter yellow over a burnt orange for prominent text, and changing footer text from gray to white, I was able to eliminate 300+ contrast errors. Yay me :)!!!

Curious to see how your site or other sites stack up? Go ahead, have a look. WAVE makes it easy :).