The One-Click Accessibility Self-Test

Posted June 24th, 2006 by Mike Cherim

Everybody and their brother has CSS and X/HTML links on their site(s) nowadays. These, in case you don’t know, are for self-testing your site-wide style sheet(s) and mark-up validation (on the page tested). These links are coded to use an absolute URI or the “Referrer,” but for testing page accessibility I know of no such thing. We used to have links that led to various sites that showed the results of previous testing, but that was before Bobby became WebXact. Rarely do I see those links now. Nowadays people rely on a web developers’ or web accessibility tool bar for their browser.

Positively False Negatives

One reason those links sort of fell out of favor is that they led — and still do where applicable — to a results page that, to the average Joe, misled the person into thinking a particular site page met a certain level of accessibility. These results pages showed the result of a automated check. These automated checks are notorious for giving false positives, some false negatives, and in general cannot be relied upon. Human oversight is needed for many of the individual checkpoints. The tools can only check for so much. They have limitations. A couple of years back, when those links and badges were more common, some people ignored that part of it and the result was an Internet just brimming with alleged AAA sites. Uh huh, sure. Personally, I have yet to even see one that really qualifies. AAA, or more accurately known as Priority 3 of the WCAG 1.0, is virtually unattainable. The problem with these claims is that they can be damaging to accessibility and it can mislead the unknowing developer. I know this first-hand because my first brush those three letters screwed up my thinking for months until I finally learned better.

A Proper Comeback

Well, it’s back. Or at least I’m going to give you a way to put a link back on your site to test the accessibility of the page tested. Before I continue, though, so I can feel less guilty about doing this, use a link phrase that doesn’t support the false “AAA” notion. In fact, if you employ what I will offer you here and now on your site, or even if you refer to this article, please give the facts about what the results mean. I don’t care if the results say “Passed Automated Verification,” you must tell it like it is by first stressing the “Automated” part. I have a few sites to treat with this link myself, but for now I will mention this site passes the Level A or Priorty One verification only… just in case you were wondering. In other words it says I failed because the link test and give the result for levels A, AA, and AAA. See for yourself, the link is on this page’s footer (See my Home page instead).

The Reasoning Behind It

One reason I’m doing this is I’d actually like to see those validation links come back onto the scene. Some will argue that they mislead, and I’ll be right there leading that group, but there is a certain good to be derived from them. Namely that good will come to users by way of curiosity. That’s how it got me. My first experience with the AAA link led me to ask: “What’s this?” Unfortunately, in my case, it caused a great deal of confusion as there was no explanation given with the link. But if done right, this link can make developers aware of web accessibility. That is what happened to me, I just took the long way ’round.

Another reason I want to do this is having a validation link on the page may lead to the conscientious developer to performing an accessibility check after making edits or adding content much the way they would with mark-up validation — I validate after every post. The idea being to catch silly little errors immediately after making them so a correction can be made quickly.

The One-Click Code

This code utilizes the Cynthia Says Portal by HiSoftware®. It’s quite simple to use, just place the code on each page. If you have HTML pages, each with its own footer, then you can use this:


<a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=2&amp;url1=http://www.yourSite.com/page.html" title="Automated Accessibility Evaluation (Requires Human Verification)">AAE</a>

If you’re using a server side scripting language, you’ll probably have global files and thus need a full URI generated by the server to finish the link (and this must have the http:// part of it. This is what you need for a PHP page:


<a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=2&amp;url1=<?php echo("http://".$_SERVER['HTTP_HOST']."".$_SERVER['REQUEST_URI'].""); ?>" title="Automated Accessibility Evaluation (Requires Human Verification)">AAE</a>

That’s it. Nothing mind-blowing. Please use it properly, inform those who may see it, don’t make any false claims, and it can be a good thing by simply making some developers more aware while keeping others on their toes.

The Button

If you like that little button in the image, here’s the mark-up and CSS to make it so. This is the basic version. You could change the colors on hover and change the border to inset on focus if you want to make it more interactive.


a.name_a_class {
  display : block;
  width : 9em;
  height : auto;
  color : #333;
  background-color : #99cc66;
  border : 0.2em outset #99cc66;
  text-align : center;
  padding : 0.1em 0.3em 0.1em 0.3em;
  text-decoration : none;
}

Here’s an example (not an active link). This one is an h4 heading.

A, AA, or AAA?


4 Responses to: “The One-Click Accessibility Self-Test”

  1. Neal Venditto responds:
    Posted: June 25th, 2006 at 8:16 pm

    Cynthia is nothing new, I’ve been using it for years. You are, of course, dead right about the abuse of these automated tools. I think it would help tremendously to have a more human-readable version of the WCAG, though.

  2. Dennis responds:
    Posted: June 28th, 2006 at 1:42 pm

    Thank for the tips.. do you know Wave also a nice and very visual tool http://wave.webaim.org/index.jsp

Sorry. Comments are closed.




Note: This is the end of the usable page. The image(s) below are preloaded for performance only.