CSS Zen Garden: Access Granted?

Posted November 17th, 2005 by Mike Cherim

It took a long time for me to get around to doing it, but I have finally submitted a CSS style sheet, an elastic design, to the CSS Zen Garden in hopes that it’ll be accepted as an official design. I have no idea if my submission is good enough. It’s not as fancy as many of the designs. I went with a straight-forward approach with keen emphasis on providing as many accessibility features as I could without touching the HTML mark-up. I succeeded well on this front, and this will hopefully be good for other web accessibilities advocates. Especially if the design becomes official.

Some of the features I added to this elastic design — which means the site enlarges with the text — were focus on all the navigation, and I also made certain there was heading availability, not relying on the highly inaccessible CSS property display:none as most of the designs use to hide that annoying but really important text. I also provided image replacement for the main banner headings, <h1></h1> and <h2></h2>, again, not using display:none. Turn off images with CSS on and you’ll see why I did this and what the advantages are. Especially if you start looking at other designs — including the master page — and how they fare under those circumstances. I made it all clear and readable as well. And as a special trick — to be more unique — do check out the designer’s name links. I was able to put those in a block display, too, all I had to do was negatively adjust margin-top to put them back in their inline-like position. I don’t think any of the other designs do it this way. Speaking of which, I also made it so the text can be enlarged in Internet Explorer — something many/most of the designs disable, much to my surprise, in fact.

Please check out my portfolio copy (with the HTML modified to make all the links work), or load my style sheet directly to the live CSS Zen Garden site to see it in action for real. Is this a step in the right direction for web accessibilities? Is the design worthy? The emphasis at the CSS Zen Garden is style and only style (though web accessibilities is being considered more now than it was before), but can’t we have a decent compromise? Do you like the design? Tell me what you think… I want your feedback. And do wish me luck, please. I should find out in a couple of months.

13 Responses to: “CSS Zen Garden: Access Granted?”

  1. Martin Neczypor responds:
    Posted: November 17th, 2005 at 2:17 pm

    Hey man, it looks very nice, but in Safari 1.2 the right column is slightly overlapping the left column, making it impossible to read parts of each word in the headers and paragraphs. It looks like it needs more padding to the left, and less on the right. I can provide you with a screenshot, if you’d like.

  2. Martin Neczypor responds:
    Posted: November 17th, 2005 at 3:28 pm

    Alright, emailed.

  3. Martin Neczypor responds:
    Posted: November 18th, 2005 at 8:23 pm

    Once again Mike, I really love the design, and your motivations for making it are quite commendable. Unfortunately, I do not know how to “hack” the CSS to just apply a certain rule to only Macintosh, and only 1.02/1.2. If I come across a fix I’ll hit you up with an email. Regards, nice work.

  4. Robert F. responds:
    Posted: November 21st, 2005 at 1:25 am

    Well, I can tell you that the original and your final version both look perfectly fine in Firefox versions 1.0.7 and 1.5 RC 3.

    Sweet design, by the way.

  5. Blair Millen responds:
    Posted: November 24th, 2005 at 10:52 am

    Hey Mike,

    If you’re interested, I did a wee CSS Zen Garden job myself a while back… I’d almost forgotten about it, so I decided to check up on it and found it was still in one piece. Here’s the link to the version I store on my own site: http://doepud.co.uk/zengarden/

    It wasn’t accepted as an official design but is listed in some category somewhere on Dave’s site.

Sorry. Comments are closed.

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