SAIF: Before and After Demo (BAD) - Examples of Web Accessibility

Added on Tuesday 13 Mar 2012

Here is a resource tip for the next time you need to meet an accessibility requirement. You had that accessibility training a while ago (didn't you!?) but you're not exactly certain what they said about radio buttons and don't really have time to sort through the guidelines and the techniques of the Web Content Accessibility Guidelines (WCAG 2). When you need a good example, think BAD.

The Before and After demo (BAD) is an updated set of web pages that provide fully intergrated examples of accessibility at work. The main website is a project of the Web Accessibility Initiative (WAI) at the W3C and it is now released for public use. A useful teaching tool, BAD is also great for those moments when you need a quick memory boost on how to create an accessible data table for example, on how to and when to use (and NOT to use background images).

With BAD you can look at the inaccessible version of any of the four pages -Home, News, Tickets and Survey; you can read a report about the accessibilty barriers that were found; you can look at the same pages with accessibilty fixes in place; you can look right at the code; you can download and use the page template adapting it for your own needs.

While the general information can be very helpful, you may want to home in on the one problem you need to solve - that one tricky item you just want to know what the accessiblity problem is and how can it be fixed? BAD  pages come in two versions. The before page is the inaccessible version. The afer page is the same page, same function, same visual design but with accessibility built in. You can look right at the code to see how the problem was solved. 

Use BAD for good accessibility outcomes. See more information about BAD.

So the next time you need a good example of good accessibility in action, Think BAD. More about how to use the demo is found on the WAI site.