The tale of the Web Accessibility Wizard

  • Author: Sarah Pulis
  • Date: 14 Mar 2013

Locating the information you need within the Web Content Accessibility Guidelines 2.0 (WCAG 2.0) can sometimes be like finding a needle in a haystack.

I firmly believe in making accessibility easier to understand and implement, and finding the information you need within WCAG 2.0 less time-consuming and more relevant to those who actually develop websites.

I set out to expand on the WCAG 2.0 Quick Reference guide by categorising the WCAG 2.0 Techniques by topic and job role, resulting in a new easy-to-navigate tool. The result is the Web Accessibility Wizard.

The WCAG 2.0 Quick Reference guide

The WCAG 2.0 Quick Reference guide is my go-to website when I need to look up WCAG 2.0 and its related Techniques. It neatly sets out the Guidelines and related Success Criteria, provides links to further information on each of these from Understanding WCAG 2.0, and lists all the Techniques for each Success Criterion.

The Quick Reference guide allows you to:

  • Filter Techniques by technology and type
  • Filter Success Criteria by Conformance Level A, AA or AAA
  • Show Sufficient Techniques, Failures, and Advisory Techniques
  • Show only Sufficient Techniques and Failures

It is the most user-friendly way to navigate a series of documents that are not known for being user-friendly.

Finding that illusive Technique

There are 337 Techniques for WCAG 2.0. Shudder.

Finding a Technique can indeed be like finding a needle in a haystack, particularly if you are new to WCAG 2.0 and haven't spent hours with your head buried in the Techniques. Finding an example within one of the Techniques is even harder.

I've spent a lot of time with WCAG 2.0 and its Techniques. There is an example within one of the Techniques that describes best practice for links that open a file directly, such as a PDF, DOCX or MP3. Before the Web Accessibility Wizard, every time I wanted to reference that example, I still had to trawl through the Techniques until I found the one that I needed.

What I really wanted to ask the Quick Reference guide was "Show me the Technique that has the example that relates to file types." (It's Technique H30, Example 6, by the way.)

Finding techniques by subject

WCAG 2.0 is structured according to Principles, Guidelines, Success Criteria and Techniques, where a Guideline belongs to one of four Principles, a Guideline has one or more Success Criteria, and a Success Criteria has one or more Techniques.

Yet when you are looking for all the Success Criteria or Techniques that apply to a particular topic, there is no way to filter this way. And often the Techniques that apply to a particular topic are spread across multiple Success Criteria.

Take forms, for instance. The number of Techniques related to forms is numerous and they span multiple Success Criteria. There are Techniques related to form labels and controls, required form fields and formats, preventing errors, and error handling and messaging.

This is the first gap that is addressed by the Web Accessibility Wizard. In the Web Accessibility Wizard, topics have been manually assigned to each of the Techniques. We call these topics facets, and you can filter all the WCAG 2.0 Techniques by one or more facet.

Using the facets, you can show all Techniques that relate to forms by choosing the 'Forms' facet from the 'Subject area' category. You can then further refine those results by choosing a subcategory of Forms:

  • CAPTCHA
  • Error identification
  • Error prevention
  • Error suggestion
  • Form controls
  • Form instructions
  • Form labels
  • Grouping form controls
  • Required form fields
  • Required format or values

Screenshot of Web Accessibility Wizard results for Forms

There are 90 facets in total within the Subject area category. There is also an additional category called 'Content format' which includes multimedia alternatives, such as captions and audio description, and text alternatives for images.

It's not just the developer's responsibility any more

Many accessibility consultants and practitioners take a role-based approach to accessibility. This is based on the premise that within a web team, not everyone needs to be responsible for all the accessibility requirements.

For example, ensuing colour contrast requirements have been met is something that can be addressed and signed off at the design phase and does not need to involve developers. Colour contrast requirements may also be applicable to content authors — although a good template should take care of this, you never know when a content author might decide that a piece of text must be emphasised using hot pink!

With this in mind, not only did filtering by topic seem like a good idea, but by audience or job role as well. This would mean that the core members of a web team — developers, designers and content authors — could filter results applicable to their job function and ensure that they meet the web accessibility requirements they are responsible for.

This approach is being explored by the W3C's WAI-Engagement Community Group, which is working on an Accessibility Responsibility Breakdown at the Success Criteria level. However, the focus of the Web Accessibility Wizard is at the Technique level, and thus all Techniques have been assigned a job role of designer, developer and/or content author.

With Techniques assigned to both a topic and an audience, using the Web Accessibility Wizard we can now ask:

"Show me all Techniques related to colour contrast" or to refine that even further, "Show me all Techniques related to colour contrast that are applicable to designers or content authors."

Bringing it all together

The Web Accessibility Wizard consolidates all your WCAG 2.0 queries into the one, easy to navigate search result.

Just like the WCAG 2.0 Quick Reference guide, the Web Accessibility Wizard allows you to:

  • Filter Techniques by technology or type
  • Filter Success Criteria and Techniques by Conformance Level A, AA or AAA
  • Show Sufficient Techniques, Failures and Advisory Techniques

In addition, the Web Accessibility Wizard also allows you to filter by:

  • Audience (job role)
  • Subject area
  • Content format (captions, audio description, text alternatives, etc.)

Each search result provides a short, one-two line description of the Success Criterion, Guideline or Technique, and links to the W3C entry where you can view the complete details and learn how to meet its requirements.

How do you use WCAG 2.0? Is there further functionality you'd like to see incorporated into the Web Accessibility Wizard? We'd love to hear your thoughts and experiences using our tool so give it a go and let us know what you think in the comments section below!