Thursday, May 25, 2017

Shapes of Things: 30 Days of Accessibility Testing

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.

Taking a brief moment in this post to reflect on a milestone. Thank you to everyone who reads TESTHEAD. This morning, my one millionth visitor came to this site. I wish I could figure out who that person is, but regardless, I want to say thank you to everyone who has come here over the years, whether it be one time or repeat reading.

25. Explore W3C’s Before and After Demonstration

The subtitle for this page is "Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0", and I have to say, this is a nice little resource to see because it gives you some concrete examples of what you could/should do to make a site accessible.

Here are two pictures of the home page they use for their example (there are several pages with before/after examples). 

Before picture of the W3C example site
Here's the "Before" picture example. Notables are the headings for the pictures and the phone number at the bottom only using a hip word spell out.

After picture of the W3C example site
Here's the "After" picture example. Other than some cosmetic variations on the layout, notable changes are having more meaningful headers for the image blocks, and the phone number displays both the digital version and the lettered mnemonic.

What' nice about this example is that you can put the two pages side by side in two separate browser windows and just by looking at the two, you can see why the After picture would be preferable.

If, however, you want to see what can be improved and what was applied in greater depth, each page has annotations to show exactly what needed to be changed and what change was applied. The top nav bar can quickly toggle between Before/After to see what has been changed. 

If you have been curious as to see how cumulative changes can be applied and the rationale behind what they are, then have a look at the Before and After simulation.

No comments: