CSS Zen Garden: Access Granted?
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.
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.
Mike Cherim responds:
Posted: November 17th, 2005 at 2:29 pm →
Thanks Martin. Yes please do (send it by email please, or send the link by way of my contact form. Thanks. I checked it on a Mac through a friend as I usually do and he said it looked great on his. Same Safari version, and he test on Mac IE 5.2 as well. Grrr. Stupid browsers.
Martin Neczypor responds:
Posted: November 17th, 2005 at 3:28 pm →
Alright, emailed.
Mike Cherim responds:
Posted: November 17th, 2005 at 4:05 pm →
Thank you very much.
Mike Cherim responds:
Posted: November 17th, 2005 at 7:00 pm →
I put this out for help in the Accessify Forum and got a report back that it looks fine in Safari 2.0.2. A step in the right direction. Whew.
Mike Cherim responds:
Posted: November 18th, 2005 at 10:04 am →
Well, it seems that version 1.2 and 1.0.3 have the issue. But it seems to be working okay in 1.2 and 1.3 on Macintosh OSX 10.3 and with Safari 2.0 on Macintosh OSX 10.4. Confusing, huh?
However, this same issue may be rearing its ugly head in Firefox 1.5 on Win XP (a FF version I’m not yet using because it seems to lack some plug-ins support).
Any more feedback would be greatly appreciated, I could use suggestions on how the “bug” might be squashed. And, naturally, if anyone wants to just say they like the design, that’s fine too. I could use that right now. Or a drink, but it’s only 9:00 am… and I don’t drink lol.
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.
Mike Cherim responds:
Posted: November 19th, 2005 at 9:33 pm →
Some modifications have been made. Derek Featherstone kindly offered a couple of suggestion. Please let me know if the above-noted problem is fixed in either of these test sheets please.
This first one has a small but-easy-to-fix bug in IE (hoverstate on authors links). But the authors’ links were put back in-line. Please check Example 1. Here’s the style sheet zen2.css.
This second one has no bugs that I found in Windows browsers (IE 6.2, FF 1.0.7, Opera 8.5, Netscape 7.2), the authors’ links are back in block displays and link block heights are set to auto so the resize even better. Small tweaks.
Please check Example 2. Here’s the style sheet zen3.css
Mike Cherim responds:
Posted: November 20th, 2005 at 2:16 pm →
Two more modifications were made based on suggestions from Thierry Koblentz: adding
position : relativeto#containerand, what I think is the main fix,left : 0added to#linkList.Please check out the final updated version and let me know what it looks like.
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.
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.
Mike Cherim responds:
Posted: November 24th, 2005 at 11:36 am →
Thanks for sharing that cool newspaper theme, I love it Blair. I also like the fact you didn’t fix the font-size. I don’t understand why most of the designs have a fixed font-size and can’t be enlarged in Internet Explorer, even though the fonts must be resizable up to 150% in Firefox. If they’re going to be resizable in Firefox, if designers are going to accommodate this as per the submission guidelines, it seems very strange to me that they’d fix the font-size. Sadly, many of the designs are somewhat inaccessible. Hopefully my design will be considered being that I went through the trouble to address the design’s inaccessibility shortcomings.
Mike Cherim responds:
Posted: May 19th, 2006 at 9:04 am →
Hey cool. It didn’t make it as an official design, but it is on the list.