On May 10, 2013, HiSoftware issued a press release: HiSoftware Gives the Cynthia Says Web Accessibility Testing Tool a Makeover . Eager to find out more about this new version, I eagerly went to the site to check it out. This is what I saw:
Who puts a CAPTCHA on an Accessibility Testing Tool? CAPTCHA’s issues with accessibility are so well documented that the notion of a so-called accessibility company using one on their own product is a bit … confusing. But this isn’t meant to be an attack piece against a competitor. Heck from a competitive standpoint I hope they keep the CAPTCHA. From a developer perspective, this redesign of CynthiaSays poses new problems – it disables a feature beneficial to users of the Web Developer Toolbar.
Chris Pedrick’s Web Developer Toolbar has 916,050 users on Firefox and 701,507 users on Chrome. One feature of the Web Developer toolbar are the options under ‘Tools’ which provide quick access to external tools for developers to test their sites’ CSS, HTML, and Accessibility. The external tool which Chris chose to point to for accessibility testing? CynthiaSays. As an accessibility advocate, even if I’ve not personally been a fan of the results that came from tools like Bobby and CynthiaSays I’ve appreciated the fact that they offered a low barrier to entry for those who wished to test their own work without having to pay for a license to a much more expensive tool. In this case, Chris Pedrick’s toolbar offers an ability for more than 1.5 million web developers to test their site for accessibility.
Activating the ‘Tools’ menu, Chris has provided two links: “Validate Section 508” and “Validate WAI” which pointed to the previous version of CynthiaSays, passing the proper URL parameters to test the current page. With the new version of CynthiaSays, this capability is now broken. This is the natural way of things on the web and is understandable that URLs sometimes change, etc. and HiSoftware – as the provider of the free service – is certainly under no obligation to ensure things work for Chris’s toolbar. The bigger issue is that even if Chris adjusts the URL parameters, so long as CynthiaSays has a CAPTCHA, this feature in the Web Developer toolbar is now rendered useless.
Or is it?
How to Replace CynthiaSays in the Web Developer Toolbar
The great thing about the ‘Tools’ menu in Web Developer Toolbar is that you can edit that list of tools. You can rename them, remove them, edit their URLs, or even add new ones. For instance, if you had a different HTML validator you wanted to use, you could add that one. Or, you can add a different accessibility tool! For this tutorial, we’re going to replace CynthiaSays with WAVE from WebAIM. Although the user interface looks different, the process is the same for both the Chrome and Firefox versions of the toolbar.
Open Web Developer and navigate to ‘Tools’
The tools menu lists out the various options available in the default install. In that menu is an Edit Tools link.
Activate the Edit Tools option
Selecting that option will take you directly to the tool options in the Web Developer toolbar’s preferences. Each tool is listed with its name and application URL. The UI differs a bit here between Chrome and Firefox but the process is the same.
Remove Cynthia Says
In Firefox, you can select the tool to act upon and then activate the ‘Edit’ or ‘Delete’ button in the lower part of the window. In Chrome, there’s an ‘Edit’ and ‘Delete’ for each tool. Select “Validate Section 508” and hit the Delete button. Do the same for “Validate WAI”.
Add WAVE
Now we can start fresh. Activate the button labeled “Add…”
The screen appears to add a new tool. Now you can add a name and the URL to your tool. In this example, I entered “WAVE” in the description field.
Next is the URL. This is the only semi-geeky part of this process. For whatever tool you want to use, you need to know the structure of the URL to know how to pass in the URL. For WAVE, it is very simple, as you simply need to enter the following into the ‘URL’ field: http://wave.webaim.org/report#/. Other tools may have different URL structures, but ultimately what the Web Developer toolbar will do when a tool is selected is append the URL for the page you’re currently viewing in the browser to the end of the application URL. For instance to test Google’s homepage (http://www.google.com), WAVE wants the URL to look like: http://wave.webaim.org/report#/_http%3A%2F%2Fwww.google.com._ So the only part you need to worry about is this: http://wave.webaim.org/report#/ and the Toolbar handles the rest.
All done!
That’s it. Now all you need to do to test your a page’s accessibility with WAVE is to go to tools and select ‘WAVE’ from the list. The toolbar posts the current URL to WAVE, and WAVE gives you the results.