Interactive WCAG

The Web Content Accessibility Guidelines (WCAG) is an invaluable resource for developing accessible websites, and necessary if those sites need to conform to a specific accessibility level. But for those who are unfamiliar with or only partially familiar with WCAG, it can be an overwhelming and confusing document. Recently I've needed to share parts of the document with several other people and groups, and I didn't have a good way of customizing the content for each audience.

Introducing the Interactive WCAG

This page brings together the W3C's recommendation as well as WebAIM's own plain-language version so they can be compared side-by-side.

Filter It

The entire document can be filtered to view the rules for a specific level of conformance (A, AA or AAA). Additionally, each rule has been tagged from a list of typical areas of specialty that might be affected (such as FED, UX, or Content).

For example, if you needed to show a designer what rules to be aware of to make his or her design conform to Level AA, you could customize the document to something that’s easily digestible.

Share It

Something like this isn't useful unless you can share your customized view. That's why I added URL updating. As filters are changed, the URL hash is automatically updated. If someone loads up the custom URL they'll see the view you intended.

Need to send that designer an email or IM? Send them this link so they get a pre-filtered view -- easy!

http://vigetlabs.github.io/interactive-wcag/#responsibility=design&level=aa

Improve It

If you'd like to contribute to this project, feel free to fork the GitHub repository and submit a pull request.

Enjoy!