Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry

Triple A

March 22, 2005

The Italian web developer community is abuzz — the css Zen Garden is not AAA compliant!

Since the beginning, the css Zen Garden has featured five links at the bottom of the site (or elsewhere, depending on which design was used to view it). Two of those links — 508 and AAA — deal with accessibility, and lead to the results of validating of the site with Bobby.

Pages 36 and 37 of the Zen of CSS Design talk about this issue:

After the markup was written, a quick check from Bobby confirmed that it passed most major accessibility checkpoints. A few quick changes were needed before launch to fix the few glitches that Bobby noticed. A link labeled “AAA” was added to the footer of the Zen Garden to signify that accessibility had been taken care of.

Or had it? It turns out the Bobby is not final word when it comes to accessibility. If you familiarize yourself with the Web Content Accessibility Guidelines published by the W3C (see “Better Accessibility” earlier in this chapter) you’ll soon realize there are guidelines that Bobby simply can’t check. Checkpoint 2.1, for example, states that all information conveyed through color needs to be available to the viewer without color as well — software like Bobby has no way of distinguishing this, especially if the information and color are embedded in an image.

In fact, if you do some digging on the Bobby site, you’ll also find this disclaimer:

Accessibility is ultimately a human endeavor. It is determined by whether or not a diverse group of people with a variety of abilities and disabilities can access information efficiently. Bobby is just one step in helping to make web pages more accessible, but cannot guarantee total accessibility.

So the Zen Garden’s HTML theoretically passed all accessibility checkpoints related to markup but there are further checkpoints that go beyond HTML. A few of them even apply to CSS, and it became evident over time that some designs weren’t taking these into account. And when you consider the accessibility implications of Fahrner Image Replacement… it’s easy to see how the CSS can quickly cause problems that no automated checker can diagnose.

The lesson learned is that automated tools like Bobby may serve as a useful starting point for building accessible Web sites, but WCAG provides many more checkpoints that are equally as important, which it cannot check for you.

By way of explanation, more than excuse, what we find is that markup I wrote two years ago — with, I have no problem admitting, less understanding than I have today — now seems imperfect in today’s context. We know more about accessibility, we know why the link is problematic, and we know that ultimately, true AAA-level accessibility is often unattainable.

So in today’s context, as the Italians who have emailed me pointed out, the links aren’t working. In many cases, css Zen Garden designs break AAA, AA, and who knows, maybe even A (depending on your level of interpretation.) Then again, some do not. But if it’s all or nothing, why do the links persist?

Two reasons. First, as I’ve also detailed in the book, the point of being able to change structural items of the markup has long passed. Content changes (ie. anything not in angular brackets) are still somewhat possible, as is evidenced by the fact that I seem to have gotten away with adding a line announcing the existence of the book. Structural changes (ie. anything between < and >) are not.

There are 150+ official designs, and close to four hundred others (the latter hosted on servers not controlled by me.) Changing the structure potentially destroys some or many of these. This is a deal-breaker. We’re stuck with having five links in that footer, for better or for worse.

The second reason is more philosophical. The links signify that efforts were made to pass accessibility tests. They call attention to the fact that the design work which is added to the site remains accessible, albeit in varying degrees. In essence, they are a wake-up call to those who might otherwise be completely unaware that accessibility and good design can co-exist. A simple link to a validator says more than a full paragraph could, and if not for some on-site recognition, then this point would likely be missed very often. Signifying that accessibility was intended is a major point of the site.

So the problem appears to me as one of simple nomenclature. How do we title these links? If AAA is not being met, would AA or simply A suffice? If there were a way to succinctly say that “this site was built with accessibility in mind; although the odd design here or there may not meet every requirement, overall it does pretty well” and cram it into 8 characters or less, I’d be happy to talk about it. So far I haven’t come up with anything myself, perhaps someone else will.

Ultimately, this discussion is frustrating, not a new one, and feels largely irrelevant. AAA is a stale guideline that has been in need of a massive overhaul for years. True accessibility requires much more education and thought than what’s found in the 14 guidelines of WCAG 1.0. Getting wrapped up in the specifics of what precisely constitutes AAA (or Triple-A if you insist) ignores the larger issue that the guidelines themselves need work. Let’s be honest, anyone knowledgeable enough to take part in this particular conversation should be aware of that.

But that’s an aside, not a shifting of the blame. If this is perceived as a genuine problem on this particular site, tell me what should be done. You now know my dilemma, so what’s the fix?

And as a polite reminder to those members of the Italian web design community previously referenced: context is everything. During the recent SxSW conference (which was mentioned in the sidebar on the same contact form used to reach me) email response time dropped considerably. Add the second conference I attended less than a week afterward (also mentioned), and I’m sure how you’ll understand why replying hasn’t been a priority. So while I can’t help but admire the devotion, the daily emails can be called off now. Much appreciated.

Damian says:
March 23, 01h

“a polite reminder: context is everything”

Yes. Quite. Here we’ve hit a kind of “theology” of accessibility. If we’re not careful, hard on its heels will come _odium theologicum_.

Look at the color issue. Let’s remember the context and get real, _signores_. This site exists to showcase visually attractive designs. It is there to show that CSS designs can *look good*, because when it was put up few people understood that they could.

It is not there to present important information to the public.

Go bother some government department that is not presenting public health information in a way that is accessible to all.

Andy Hume says:
March 23, 01h

The deal-breaker, as Dave has pointed out, is that he can’t break the garden.

It <strong>may</strong> be possible to change the ‘AAA’ to ‘AA’ or even ‘A’, but anything else and you may well start hurting people’s CSS designs. That is not acceptable, and I can understand why Dave feels it appropriate to leave things as they are.

He has acknowledged the problem, and I feel the best solution is to link to a page summarising this post and explaining the important points.

March 23, 01h

I guess I’m missing the point here: just as with the CSS, XHTML and 508 links, the AAA link leads to the results of an online validator.

It does not inherently claim that the page is compliant. Instead, as Dave points out, it acknowledges that the author understands that these are issues worth seeking to address.

If you want to claim validity or compliance, there are (generally unattractive) icons that can be included on the page, as described on the results page of the validators.

Is the issue that a AAA link is widely believed to be a claim of compliance?

John A says:
March 23, 02h

“So, is good to remove “AAA” otherwise it means that Dave declare that is Level Triple A. This is not a Bobby issue, this is human issue!”

The first article you specified in your comment suggested to use icons or text in this manner:

“This page conforms to W3C’s “Web Content Accessibility Guidelines 1.0”, available at, level Double-A.”

The link text “AAA” is not equivalent to “This page conforms to … blah blah blah”.

Matteo Balocco says:
March 23, 02h

“Let’s remember the context and get real, _signores_. “

Well, _signori_ (we don’t use ‘s’ for plural cases). However, you are right. Context is everything. It is curious how the same starting point leads to different places.

Well, why the Mezzoblue footer features an “Accessibility Statement” (correct) while CSS Zen Garden shows a “aaa” (not correct)? That was the topic of the discussion.

“It is not there to present important information to the public.

Go bother some government department that is not presenting public health information in a way that is accessible to all.”

Right, and we’ll do for sure, promised. But wait… what about the CSS Zen Garden role about styling a website? Do you remember? “context is everything”. The message of an ‘aaa’ link on those pages (on such important pages) is that you can achieve aaa accessibility regardless of the css you use. That’s not true, and we have to say it loud. Actually Dave said it, but right now, in his post… Thanks Dave.


“If you want to claim validity or compliance, there are (generally unattractive) icons that can be included on the page, as described on the results page of the validators.

Is the issue that a AAA link is widely believed to be a claim of compliance?”

If I understand what you mean, yes it is. ‘AAA’ link is ambiguous and tells more than what’s acceptable by a disable person.
We are different people with different sensibilities. And most of all here in Italy we are not so pragmatic. If you don’t use a w3c badge but an ‘aaa’, well, the message is the same…
Maybe the issue is this… :)

Jim says:
March 23, 02h

> The lesson learned is that automated tools like Bobby may serve as a useful starting point for building accessible Web sites, but WCAG provides many more checkpoints that are equally as important, which it cannot check for you.

Yes, the fundamental problem has been well-understood for quite some time now, but Bobby in particular has had some quite significant shortcomings in the past, such as complaining about empty alt attributes, that has led to it being actively harmful to accessibility in some cases.

> How do we title these links? If AAA is not being met, would AA or simply A suffice?

I think “accessible” is the best balance between brevity and accuracy I can think of. IMHO, the link should go to a page stating your intentions, which itself has a link to Bobby.

If that’s too long, another option is “a11y”, in the same vein as “i18n” and “l10n” (“accessibility” == “a”, followed by 11 characters, followed by “y”).

You can’t really make specific claims regarding WCAG unless you manually check each design, and it’s possible (probable?) that they will differ.

> Is the issue that a AAA link is widely believed to be a claim of compliance?

If I see an AAA link on a page, I assume it’s a claim of compliance. Perhaps this is down to the culture of putting it next to the “valid HTML” and “valid CSS” buttons.

Bruce says:
March 23, 03h

There’s also the problem of images; Joe Clark pointed out that in my Geocities 1996 design, the gorgeous animated gifs could cause siezures. No automated tool can catch that. BUT - let’s get real. AAA compliance is potentially impossible, anyway, due to the vagueness of the guidelines, and no-one has ever claimed that Bobby/ Cynthia Says/ blah blah can validate in the same way that the xhtml validator can deliver an unequivocal verdict. xhtml/ css is for machines, so tightly controlled; accessibility is about people.

I think it’s a good thing - if there were a perfect accessibility validator, we accessibility evangelists wouldn’t reap the lavish rewards we do, or enjoy enviable lifestyles involving caviar, cocaine and fast cars. Err….

March 23, 03h

So the HTML is accesible as far as it possibly could be… but some of the designs aren’t…

To be fair, will any design ever suite every possible disability situation?

Varying degrees of blindness/colour blindness and all the other known sight related problems all require some different varient of font size, and complimentary colours.

So what do we do? we create a high contrast scheme, a large fonts scheme etc etc….

So surely, every design in the Garden doesn’t have to be perfect, the point is you can pick the one that is most readable too you (Ofcourse the garden is different in that each design isn’t about high/low contrsat etc, but you hopefully get what i mean)

Matteo Balocco says:
March 23, 03h

“There’s also the problem of images; Joe Clark pointed out that in my Geocities 1996 design, the gorgeous animated gifs could cause siezures. No automated tool can catch that.”

Try this:

March 23, 03h

Maybe the answer is make the text
“AAA?” and change the link to this blog entry.

That way people that follow the link can understand everything that deals with this discussion.

Jesse says:
March 23, 04h

I don’t see a problem with those links (although a little tacky, on par with ‘best viewed in’) but I do see a problem with people getting on the case of anyone in regards to ‘your site is not accessible to _ standard.’ The ‘accessibiliy zealot’ is just as persistant as the ‘mac zealot’ it seems ;) but leave it alone…

Mark says:
March 23, 05h

How about the concept of “approximate equality” (≈AAA)? The implication is that the HTML meets the AAA standard, but portions outside of the author’s control may mean the site is not quite there. If you don’t like that symbol, then maybe the “less than” symbol (<AAA).

My point is, as a developer of dynamic web sites, all I do is create the shell (HTML). The content and the presentation are beyond my control. There is NO WAY of checking all of the subjective accessibility standards in a consistent manner for the thousands of dynamic pages that are generated. There should be some way of indicating that a site passes all of the “yes/no” checkpoints that a tool can validate.

Personally, I would like to see a percentage score, not the restrictive “A”, “AA”, or “AAA”.

W3bbo says:
March 23, 06h

There are several possible courses of action. Like Luca said, changing the text content to “Accessibility” wouldn’t change the designs much. Or just use the element and type “Acc.”, that wouldn’t break any CSS designs, IMIO.

Else, empty the element?

For the “Submission Guidelines” section, IIWY, I’d add a section asking the design authors to check their design’s WCAG/AAA conformity and report it. Then with an appropriate backend, just do a <?php echo “AAA/AA/A” ?> into the anchor region inside the element. Granted, many authors may groan at the notion, it remains a possibility, without breaking designs either.

March 23, 06h

Rather than debate the ethics of such a link if a given design won’t always be accessible, I’ll offer a (hopefully) practical solution:

1. Change the link text to “May Be Accessible” or something along those lines. (“May be AAA” or “AAA in theory”?)

2. Add an onclick event that opens a small popup with the disclaimer that not all designers will take accessibility into account for their designs, and that the Zen Garden is built to showcase the versatility of CSS and design instead of the importance of accessibility guidelines.

And, yes, I realize that it is somewhat hypocritical to use an onclick javascript event for an accessibility link. As an alternative, you could possibly use the title attribute to place a much shorter disclaimer. In fact, combined with the onclick, that might be the best solution.

Shawn says:
March 23, 06h

Yikes, not about to get into this one, but merely wanted to point out a tool that still needs a LOT of work before it can really get used in any sort of day-to-day environment, but has the ability to simulate low vision and highlight problem areas (including areas of images).



I know I said I didn’t want to get into this one, but I’ll second an opinion. As a developer/designer who once worked for a horribly uncompliant government agency to try to make them compliant, I do agree with Dave’s “The links signify that efforts were made to pass accessibility tests. They call attention to the fact that the design work which is added to the site remains accessible, albeit in varying degrees.”

Neko says:
March 23, 07h

Just a clarification: the guys from are not and do not represent the “The Italian web developer community” (I hope it was ironic, Dave), they are just a bunch of guys on a mailing list.

As for the subject: Dave explained why he cannot modify the structure, so drop it already. Speaking of context, that code is two years old, so just try to remember what we were doing during that days and how easy was to self appoint “badges” of compliance.

March 23, 07h

I think it can be argued that many of the accessibility conformance requirements state that providing an alternate accessible version will suffice if some criteria cannot be met directly. In the case of the zen garden, there are plenty of alternate stylesheets to choose from, and if one particular stylesheet isn’t accessible to some users, they may easily switch to another that is or disable stylesheets completely.

Mike Combs says:
March 23, 07h

I’m *sure* I’m oversimplifying this, but I think the issue is the label and title of the compliance test, and not the compliance test itself.

Instead of claiming AAA compliance, you should claim Bobby validation of AAA compliance.

This puts the burden on the validation software (Bobby). Users who are interested and click on the link are taken to Bobby and can learn more about the limitations of automated compliance testing from there.

Making a site Bobby-compliant is still an important step in understanding accessibility and taking concrete steps to do something about achieving it. Your link will promote that.

Someday, maybe we’ll have an automated accessibility validator for CSS. Until then, the practical steps your site has taken are a very useful introduction.

Remember, CSSZenGarden is often a light-bulb moment for people that enlightens them to the separation of style and content and accessibility in the first place.

Making a minor change to the title and label won’t break your designs and will preserve the essence and “honesty” of CSSZenGarden.

March 23, 07h

In reply to Neko: Yes, the title is wrong.. is “The Italian web developer community about web accessibility”. A lot of people inside this list are the major experts in Italy and 5 of them partecipate to the activity of WCAG Working Group. I’m one of these, I’ve wrote also to Dave with a list of issues that don’t let to conform to Level AAA.
At this point, I suggest to apply the same criteria of this web page, with a link “Accessibility Statement”.
Otherwise, link to AAA to Bobby (that is not the right destination of the AAA text) give only a wrong interpretation of WCAG.
That’s all folks.

March 23, 08h

You could change the link to simply say “Bobby” instead of A/AA/AAA/etc.

But I prefer the idea of adding an accessibility page with a longer explanation, and linking to that instead of any validator.

Oliver says:
March 23, 08h

Who needs AAA when cell batteries are so much more smaller XD.

But seriously, does it really matter?

March 23, 08h

Sounds like a learning opportunity to me!

Having the link point to an Accessibility statement is definitely the way to go.

What *I’d* like to see on such a page is a discussion of (some of) the Accessibility considerations pertinent to the CSS designs in the Garden.

If you were ambitious, a list of official entries, whose designs met AAA requirements would be very illuminating.

John A says:
March 23, 09h

Maybe I’m missing something, but when does a link to a validator imply conformance?

I can put a link to W3C’s XHTML Strict validator on a page I wrote 10 years ago, but that doesn’t mean it actually validates….

It just shows the user I am attempting to create valid/accessable webpages.

Now putting a badge that says “XHTML Strict Compliant” is another story.

If Bobby doesn’t accurately validate accessablity, thats Bobby’s problem … not Dave’s for adding a link to it!

Frankly, some of you need to re-evaluate what a link on a page means…

Kev says:
March 23, 10h

Hmmmm. I think this is more of a case of people in the past over-estimating what auto-validators are capable of.

Its simply not possible to automatically validate AAA compliance. When a site links to an auto-validator it suggests that the site in question is claiming that level of compliance. But really all its doing is demonstrating that it meets that particular auto-validators criteria.

I don’t think there was any self-aggrandising being done by Dave here, he was merely doing what we all were back then. If its not physically possible to alter the markup at this stage then c’est la vie. Maybe a brief explanation could be added to the ‘default’ Garden entry?

In the meantime, maybe this is a good opportunity to learn about the hazards of auto validating accessibility. I decided awhile ago after talking with various clever bods like Gez at that a better policy was to link through to the WCAG level of compliance I was claiming on the W3C site. That way people could judge for themselves.

March 23, 10h

This seems like a lot of hoopla over nothing to me. The site links to bobby, it never claims compliance. The title for the link says, “Check the accessibility of this site…”, it doesn’t say, “This site validates as AAA compliant.”

If people are misinterpreting “Check this site” as “This site validates”, then the problem lies with the comprehension abilities of those people, not with the site itself.

Besides, all the currently available accessibility standards are lousy, anyway. They’re vague and unenforceable, and the people writing for them rarely have the ability to check any level of accessibility themselves, anyway. How many of us actually have access to a screen reader? Writing pages for JAWS and then testing them in IE makes about as much sense as writing pages for IE and then testing them in Firefox. Even if JAWS or any other screen reader can read the page correctly, that still doesn’t necessarily make it accessible, as the definition of “disabled” includes not only the blind, but the deaf, and those with problems with motor skills or learning disabilities.

What really matters to you as designers? That everyone (or at least nearly everyone) can read your pages, or that you get to put a fancy “this page validates!” link in the footer? I’ve been in charge of a US government web site for the past three years, and I know that our site has pages that wouldn’t validate on Bobby - probably most of them would give warnings. This should be a bad thing as all government web pages are required by law to be 508 compliant, but very few of them actually are, because no one cares. In three years, I’ve never once received a complaint with regards to accessibility.

This whole argument has very little to do with accessibility and everything to do with standards compliance. This is compliance solely for the sake of compliance �“ notice that not a single person has suggested actually trying to make the page more accessible �“ no one cares if the disabled can actually read it, they just want to make sure that it’s stated very clearly whether or not it’s readable. If I was disabled and I came across the site, I’d figure out whether I could read the site long before I got the the last three characters on the page, what difference would it make at that point what the link said?

Casey Gollan says:
March 23, 10h

I see your point, but if you ever did want to get rid of the AAA link you would just use {visibility: hidden;} to hide it without affecting the structure. Some designs might have a blank area, but nothing to bad. In my opinion I wouldn’t hide it because it is truly a matter of circumstance. Tell all new submissions to validate theirs with AAA and if it doesn’t fly have them {display: none} the link.

Sarah says:
March 23, 10h

This discussion has really emphasized my preference for using creation dates or version numbers on large websites, and expecting that mistakes or regrets will be revealed by the time version 2.0 rolls around.

Sometimes, especially with references like zen garden, it is preferably to have a static time capsule anyway, with the ongoing discussion separated.

So, why not throw a note about accessibility in the FAQ that is linked from every page in the zen garden? It could be quite similar to the note about font scaling.

March 23, 10h

Some notes:
Therare two methods: text and icons.
“Pages bearing this logo indicate a claim of conformance by the page author or content provider to conformance level Triple-A of the W3C Web Content Accessibility Guidelines 1.0, including all Priority 1, Priority 2, and Priority 3 checkpoints defined in the Guidelines.”

But read also here:
“Content providers are solely responsible for the use of these logos. Before using these logos as part of a conformance claim, we recommend that the provider be familiar with the Web Content Accessibility Guidelines 1.0 and use a variety of review methods to ensure that any page using this logo meets the conformance level claimed.” […]
“Please note that use of this logo is not conditional on an automated test. There is as yet no tool that can perform a completely automatic assessment on the checkpoints in the guidelines, and fully automatic testing may remain difficult or impossible. For instance, some checkpoints rely on an interpretation of what “important” information is, or whether the text equivalent for a non-text element is accurate.
It is also possible for automated accessibility checkers to register “false negatives” or “false positives” due to the type of mark-up on a page. For these reasons, the logos on this page are used to indicate only a claim of conformance made by the author of a page, not a machine-validated conformance.”

So, is good to remove “AAA” otherwise it means that Dave declare that is Level Triple A. This is not a Bobby issue, this is human issue!

March 23, 10h

Roberto (#28),

I followed your first link (

There’s nothing in Section 5 that says putting “AAA” on a page is a claim of conformance. Far from it, the guidelines list four distinct elements that make up such a claim in text form (check out the example).

AAA isn’t even one of them (according to the guidelines it should read “Triple-A”).

I still don’t get what the issue is here, expect perhaps that of managing expectations…

James says:
March 23, 11h

How about this for a solution:

Change the title text of your AAA link to read something like: “This page strives to fulfil all AAA accessibility checkpoints but, depending on the CSS design you are viewing, may not always achieve this.” …or something similar.

That way you don’t change the text in the garden or any tags so no designs break - but, assuming people hover over the link for a second - you can say all that needs to be said.

Just my 2¢

riccard0 says:
March 23, 11h

My question would be: there is such thing as an “Italian web developer community”? And, if so, haven’t they something more useful to do?

Kev says:
March 23, 11h

“In three years, I’ve never once received a complaint with regards to accessibility.”

Maybe because the users this would affect can’t use your sites in order to find a way to complain?

“This is compliance solely for the sake of compliance.”

No, its not. Accessibility standards are there to help users access websites. I can point you to numerous examples of various disability groups, including groups comprised of users with learning disabilities that ask designers to meet accessibility standards laid out by WCAG. No ones claiming they’re perfect as they’re not but they’re a lot better than nothing at all.

“Notice that not a single person has suggested actually trying to make the page more accessible.”

Did you read Dave’s post before commenting?

“the point of being able to change structural items of the markup has long passed.”

Joe Clark says:
March 23, 11h

Wait – somebody’s chasing the unicorn of AAA compliance, which is impossible to achieve for most Web sites anyway?

And they’re *Italian*? The *Italians* are on Dave Shea’s case? (Or merely some of the usual suspects?)

I’m *shocked*. *Shocked*.

Dave S. says:
March 23, 12h

You know, I tend to agree with those who are calling this a problem of expectations. From the beginning of the site, the title text on the AAA and 508 links reads as follows:

“Check the accessibility of this site according to Web Content Accessibility Guidelines 1.0”

And not:

“This site validates as Triple A”

The XHTML and CSS links are worded similarily. So, NONE of these links are explicitly claiming compliance, they are instead giving the viewer a means to check IF the site complies, by linking through to third party sites that validate and provide extra context.

Xian says:
March 23, 12h

While you can’t remove the link you could change the link*. And send it to a ‘Accessibility is important and has changed in the past two years’ page, or maybe even this post. Anyone who cares enough to click will get an explanation.

* Probably. There may be designs that use attribute selectors to scan for it. In which case a JS onclick handler would catch most visitors.

Matteo Balocco says:
March 23, 12h

Xian, you are right. I’m an italian involved in the discussion about CSS Zen Garden accessibility declaration.
I can say that the Webaccessibile community just asked Dave to change the link text. An ‘aaa’ link is ambiguous and not correct.
Dave himself says that there are checkpoints that BOBBY can’t verify… another reason to remove what you can’t demonstrate…

March 23, 12h

it’s possible to change the link text “aaa” in “accessibility” linking to an explanation page.

Matteo Balocco says:
March 23, 12h

to be honest, I’d never send you a mail a day… really…
I just wanted you to know how much we care about true accessibility declarations.
And in those days we wrote to you and Molly without receiving any response back.

An accessibility badge is not an award you can put on your website, is just an information you give as a kind of respect towards people with disabilities.

In the Italian discussion group I promoted a soft way of discussing about this topic knowing you are a polite person and, most of all, someone who listen to others thoughts.

I thank you for your attention and for your post. Please forgive me if I bothered you.


March 23, 12h

I agree with the other post.
The problem is the declaration of conformance to a level that is not programmatically testable.
Also, some elements (like abbr) are not explained in the page.
CSSZengarden is a powerful resource, referred always in our classrooms, but how present this as good example when it shown a text “aaa”?
A link to “accessibility” page that explain about accessibility of the markup (and why is not possible to make a declaration of conformance for AAA level) would be good.
For eg, I could do a CSS for CSSZengarden all with foreground and background colour as black: for WCAG 1.0, this could mean (if all the other checkpoint are soddisfed) that I’ve reached level AA …

Jim says:
March 23, 12h

I think the basic problem is that in most cases, when somebody provides HTML|CSS|WCAG links on their pages, they *are* making a claim of compliance.

It’s only natural, when you’ve seen those links in a certain context dozens of times, to assume that context every time you see them.

When visitors have been conditioned in this manner, you have to go out of your way to *not* make the claims the other websites are, since any ambiguity is going to lead to people believing otherwise.

March 24, 07h

Shouldn’t you be complaining to Microsoft. If it was easier to disable the stylesheets and set your own styles, wouldn’t this be a non-issue?

I think linking the “AAA” to this article makes sense.

March 24, 08h

I’ve lost count of the number of people that have asked me what the AAA means on the Zen Garden designs I could probably find a dozen or so posts on forums I have replied to concerning those three letters that appear.

Essentially most people become confused with seeing AAA as the title attribute says: “Check the accessibility of this site according to Web Content Accessibility Guidelines 1.0”

Thus suggesting it leading, and following WCAG 1.0 whereas in fact it means tested with Bobby “WAI Content Accessibility Guidelines 1999/05/05, Support Level: AAA which is a rather hollow yardstick, as it’s a robot.

It is quite obvious many of the deigns don’t reach W3C: ‘Conformance Level “Double-A” ’ as it is clearly illustrated:

The point is most people wrongly assume you were labelling AAA and meant W3C “Triple-A” which is an easy mistake to make; that is what damages reputation.

Michael R. Havard says:
March 24, 09h

My belief is that the “badge” or AAA notations as well as the CSS/XHTML/etc badges are there more for the sake of promoting awareness of those issues and not as a medal of honor.

How many people are going to go to a site and look for the declarations and then either read or skip the site based on those declarations? NONE. Additionally it’s much too easy to assign such a notation to a page and fall well below what anyone’s expectations or interpretations of those recommendations are.

For example some accessibility guru’s suggest that you should “dumb down” the content so that people with mental disabilities, learning disabilities, or low IQ can still use the site. How do you do that? What does it mean? How do I validate the technique?

Many of the guidelines end up similarly ambiguous.

Additionally it comes down to interpretation. If I create an HTML page that conforms to everything I believe to be in the guidelines and mark it as conformant but then slap some script on top or some CSS that causes a usability/accessibility issue then does it become non-comformant? If the user can turn off those features that cause it to be non-comformant then is it comformant again? If I provide a means to disable those features from the web page then is it again comformant or not? If I provide an RSS feed or XML file of the content am I conformant? How is conformance defined - based on the HTML or on the whole package of files being sent to the user agent? If it’s based on the whole package of files to the user agent then don’t we have to also take into account how the user agent interprets those files?

Answering those questions gets us into more serious issues. For example: the content might meet the accessibility guidelines in browser A because browser A provides certain features. Meanwhile browser B doesn’t have those features and so the content is inaccessible or less accessible in that user agent (JAWS/Opera/IE/etc.).

A good example of this is accesskeys. Each user agent has it’s own set of keys that potentially conflict with the accesskeys that a site might use. Additionally some browser/versions don’t support certain keys at all, conflict or not (I remember Opera not supporting numeric accesskeys at one time). So then you end up with some IF/THEN/ELSE type of accessibility statement

“This site is accessible to people with screen pokes, people with visual impairments, people with aural impairments, people with an IQ above 100, people with motor coordination impairments, and people using IE ver 5/5.5/6 Opera 7 Mozilla/Firefox 1+ and JAWS but not these browsers….”

I do believe in accessibility. I think it’s something we should all strive towards. However I think what we should be focusing on is spreading the word, involving and engaging communities, and creating interest and NOT in picking people or sites apart or squabbling over ambiguities.

Kev says:
March 24, 10h

“For example some accessibility guru’s suggest that you should “dumb down” the content so that people with mental disabilities, learning disabilities, or low IQ can still use the site. How do you do that? What does it mean? How do I validate the technique?”

I’m surprised that accessibility gurus say this. The checkpoints mention using the clearest natural language you can but I’ve never heard anyone suggest ‘dumbing down’ content.

A good technique is to put a summary of each page at the top of the page describing the main points of the page in very easy to understand language with little complexity. You could easily hide this text via CSS and show it ‘on demand’ via a ‘learning disability’ toolbar. This isn’t a technique that can be validated but its recommended by a number of people involved in reearching the best way to make sites accessible to those with learning/perceptual disabilities. It certainly won’t stop your code from validating if thats important to you.

Can I recommend a quick read of pieces on JuicyStudio and my own site?

March 24, 11h

Xian wrote (Post #1):
“While you can’t remove the link you could change the link*. And send it to a ‘Accessibility is important and has changed in the past two years’ page, or maybe even this post. Anyone who cares enough to click will get an explanation.”


I feel this would be a simple and logical solution which should be implemented as soon as humanly possible, especially the latter part of suggesting a redirect to this article.

This has been a long time in coming. Long overdue in my honest opinion. So while I think it is admirable on your part to come clean, so to speak, as long as those three little letters reside on the site and are linked to Bobby’s Worldwide, the wrong message will continue to be sent as the majority of people who view the site and are inspired by it will not make it this far to learn the truth. I know I was duped by it at first but learned the facts quite some time ago.

I have long felt this way indeed and it has been the focus of many discussions. Twice I have tried to initiate contact with Mr. Shea, but sadly a reply was never given. I was blown off, so to speak.

Allowing this to continue only further damages the credibility and importance of web accessibilities. Moreover, it sends the wrong message to new developers as they look to the site for inspiration and guidance. It even hurts the CSS Zen Garden itself. I know it has for me and many of my peers.

As I wrote in my own web log: (“Shortcuts can’t be taken for the sake of design. I mean, really, try explaining that to someone who truly needs these accessibility features. You can’t. It’s a fine line which simply cannot be crossed.”)

Please redirect the link at the very least, Mr. Shea. It’s in the best interest of the web development community as a whole. You have successfully positioned yourself as a leader and thus have an obligation. Despite your article’s declaration, for which I do applauded you, without swift and decisive corrective action, it has little bearing.

Thank you.
Mike Cherim

Matteo Balocco says:
March 24, 12h

In reply to Dave Shea:
Dave, nobody criticized the title attribute of the ‘aaa’ link, but the text itself. Please, consider the chance to change it to a more honest ‘aaa?’ as Sheldon (#37) proposed.

In reply to those said something about ‘italians’ and ‘italian web developer community’, ’ And, if so, haven’t they something more useful to do?’, and so on…:

To be honest this is not a question regarding italians. What a bad taste… It is just a question regarding people with disabilities, italians, canadians, etc… A good policy in declaring something is that you declare it when you can afford it.
If not, silence is the best choice.
CSS Zen Garden cannot achieve AAA conformance, so, please, don’t suggest that can do it (even if you put an explainatory title attribute to that link).

Think about how a disable person look at that website content.

Think at the role of the CSS ZG in the international web designers community (yes, if it really exists…).

Do you want the proliferation of ‘aaa’ links to bobby on tableless websites? Ok… that’s not my idea of accessibility declaration. Humble opinion, of course…

Then. Please, take a minute and look at the Italian Laws about web accessibility (Legge 04/2004 known also as “Legge Stanca” or “Stanca Law”). It was written with the direct and strong partecipation of disables community, developers community, italian wcag
wg members. It has been revised, corrected, and now is the most advanced law about web accessibility. Italian community (not just web developers) has a great sensibility about how a disable can enjoy contents on the web.
That process is not simple at all and it needs time, hard work, and consciousness.
I think other countries should have the same care about their disables.
I think that who is considered as a web design guru should think how to promote web accessibility not just declairing bobby validation.

Now I think it isn’t an ‘accessibility’ issue. Just a ‘style’ issue.

Matt says:
March 25, 09h

Wow, a lot of conversation about this.

The ‘aaa’ on the garden pages has it’s title attribute as “Check the accessibility of this site according to Web Content Accessibility Guidelines 1.0”.

Surely you all agree this is in itself an explanation as to its purpose.

It appears to me that many of you ‘assume’ the meaning of elements on a page instead of reading them completely. The WCAG 1.0 guidelines clearly state that link text should make sense when read out of context Dave has ensured this is true, so I see no fault with the ‘aaa’ link.

We all know somebody can find something on your site that is not aaa compliant, no matter how hard you try. Is the world become so obsessed with standards that the hard work of many is being simply dismissed or condemned.

I only hear complaints about websites from users who believe validators to be the measure of accessibility. Surely users who require websites to be accessible are the only people who can tell us whether a site is useable or not.

My view is that accessibility validators, such as bobby, generate accessibility problems by forcing web designers to consistently tweak their sites. I feel that, beyond ensuring a page/site meets the machine readable checkpoints, and no obvious errors exist, e.g. mouse only popups; there isn’t a problem until a visitor to the website tells you they cannot view your content.

March 25, 11h

It mislead me, Matt. When I first saw it and followed the link to Bobby’s, I said to myself, “I am seeing a AAA accessible website. Wow!” Thus I feel it is extremely misleading and damaging to new developers. You see, I didn’t know that at the time and I went out and made my own AAA site. It was only upon its review by accessibility experts that I discovered that I was wrong. My site wasn’t AAA, and that is when I discovered that my source of inspiration wasn’t legit either.

Those three little letters linking to Bobby’s results page and the icon are terribly misleading. This is absolutely so, I’m afraid. I should know.

Not only should it be linked to this article, but on further thought, I feel the link should be changed to “???” since there seems to be so much questioning about this subject. The 508, well, think that one’s fine and doesn’t need addressing.

Mike Cherim

Matt says:
March 26, 04h

Mike, from what you say, and by my interpretation of accessibility, there is a problem with the use of ‘aaa’ on its own then.

However …

Does this mean that the ‘title’ attribute for an element is ineffective and should not be relied upon, or even used? From whats being said I believe we could all learn that the title attribute is not a valid way of explaining what we mean, and is often overlooked, after all, for the common mouse user, you have to hover over the element for a short time before the title appears.

So do the WCAG guidelines need adjusting? Instead of having us use the title attribute to explain what we mean, we should instead direct to an explanation page first. So, if something is ambiguous you are directed to the FAQ or similar (as many have suggested). In which case, is this more accessible … i guess so … but it is also an extra page our users would have to go through to get to the desired content. Bit of dilema there.

March 26, 09h

Your questions and comments are certainly are valid, Matt, and I appreciate this opportunity to respond.

In this case, the title attribute for that link states: “Check the accessibility […]” as you know, but it points to the ever-deceiving Bobby’s Worldwide results page, not to the W3C’s published checklist of guidelines, so it’s being misused. If it pointed to the checklist the “AAA” wouldn’t mean a thing as that really is Bobby-speak, thus one would have to investigate the meaning further (which is fine on an educational website). In my eyes this is extremely deceiving to the uninitiated, as I was but a short time ago.

It’s well known that the CSS Zen Garden takes liberties for the sake of design flexibility, but due to the simple fact that it is educational by nature, it shouldn’t take said liberties without a clear and concise explanation supporting them. For the sake of education. Even if this requires a long description as an alternative to the title attribution.

In my opinion it should be clearly presentable as to why the styled-page text cannot be enlarged to Internet Explorer users (not that I’m saying it should be because the paged is backed by a solid html page), or why the links are separated by non-breaking spaces instead of stable character separators, or why an image replacement technique wasn’t implemented for the main heading, or why some of the styles were permitted to use imagery in lieu of proper headings by placing the headings with spans in the first place, or why some of the styles bearing the link are nearly unreadable due to issues with limited contrast or break horribly on Firefox if the text is enlarged. Taking these liberties as such could be deemed as abusive.

Sure the guidelines need work. As long as they allow individual interpretation this is the case. First, the “Must-do, Should-do, and May-do” terminology should be changed to “Must-do, Must-do, Must-do” for starters. But then again, they are guidelines, not rules, and are just asking to be manipulated.

To me, the CSS Zen Garden is as it states: “A demonstration of what can be accomplished visually through CSS-based design.” It is a fantastic example of this and Mr. Shea has contributed to the design community on this front in the most exemplary way. For this I acknowledge and support his efforts fully. But the site is not an example of accessible design and have long felt this detracts from the site’s educational benefits and merit.

Removing the link entirely might be best, but I do understand the impact this could have. So, perhaps the best thing to do would be to replace the “AAA” with “???” and change the link so it leads to a solid explanation, a page bearing more links on the subject of web accessibilities, perhaps. The site’s educational benefits would be further enhanced if this were done.

Mike Cherim

March 30, 12h

Hi i’m a italian webdeveloper,
I think that the “Garden” born to show the potentialities of the CSS design. It was between the first.Unfortunately the perfection does not exist.And today, thanks to this project, a lot of people has learned to write correcty xhtml. Think that before it, There are many websites in Italy that deserve a criticism.

Mario says:
March 31, 10h

Yes Emiliano
may be that some people are obsessed about the AAA compliant and also may be that somebody take more care about the other’s garden than their own.

CSS Zen Garden is still a good example for Italian web designers.

Roberto says:
April 16, 10h

Sure Mario, is right. A good example for CSS use, a bad example for WCAG “AAA” use.

Roberto says:
April 16, 10h

the title text unfortunately for AAA is also wrong: Bobby cannot be use to check accessibility for a website that is 100% CSS-based. Bobby don’t evalutate the CSS. This is because instead of “AAA” Dave should use “Accessibility Statement” like in

November 17, 22h

As it stands right now, the AAA link points to an entry in the Mezzoblue FAQ which provides an solid explanation. I, for one, am very satisfied by this solution – aside from the title attribute’s text. The AAA entices visitor to click out of curiosity, then they are introduced to the notion of web accessibility and are encouraged to learn more. Perfect. It enhances the site’s value as an educational resource.