Give ’em the aXe: 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 #3.

3. Share your favorite Accessibility tool.

 I’m not sure if this counts as my favorite, but it’s one I’m using quite a bit right now, and that’s practically the same thing.

As I posted yesterday, WAVE is a popular Accessibility checking tool, but it looks at only one page at a time, and in a different window. When exploring Accessibility issues, I prefer to deal with the page right then and there, using something like Chrome Developer Tools or the other flavors of application out there that serve similar purposes.

If you use Chrome and like using Developer tools, then Deque Systems Chrome extension “aXe” may be right up your alley.

So let’s see it in action. How about we repeat the test we did yesterday with WAVE on http://mkltesthead.com?

Image showing aXe Development Tools section
We see that the error regarding image alt tags (several of them in fact) is still an issue, and we can highlight one of the images aXe is complaining about. 
Great, so what can we do from here? We can test out a change using Developer Tools, and indeed a rescan shows that adding an alt tag drops our count of image tag issues. That change will only be good for that current session, but it does allow us to directly see the changes we apply and the effect they have. It also acts as a prompt for things we can directly modify for the image in Blogger, too. To do the latter, all you have to do is:
  • Edit the page.
  • Select the image.
  • Click on “Properties”.
  • Fill in the title text and alt text as desired.
  • Click Save.
If you display the page again and rescan, you’ll see the count for images without alt tags drops by one.
So what was noteworthy about that? I could do it in the same window and then recheck it after the edit and see that it was updated. Of course, this is something that in a site where all of the files are local, you can just do a regex search and identify which images don’t have alt tags. Blogger doesn’t give me that option up front, so this is a nice way to check for Accessibility conformance, debug in the app view, and make changes as I go. 
Not bad for a free app. Not bad at all :).