Scott McDaniel boulder, colorado

View the design - 100% CSS wholesome goodness!

UPDATE: If accessibility is important to you (why would you be reading this if it isn’t) you might like to take a look at this other post of mine The Most Accessible and Useable Survey Tool. Thx.

I was honored to have my Accessibility Games Design featured at the css Zen Garden, a showcase of css design work.

The idea for this sprung out of the controversy around the 2000 & 2004 Olympic websites being inaccessible to disabled users, because of their out dated coding techniques. They Olympic committee lost a lawsuit in which $20,000 damages were awarded to a blind man in Australia, because the 2000 Sydney Games website violated the Australian web accessibility laws. Read more about a case for Olympic web accessibility here. There is a similar law in the UK and in U.S Section 508 of the Rehabilitation Act has the same rules for websites of the federal government and its vendors.

Things have improved for the 2004 Athens site, but not enough IMHO. The site is still hacked to together with tables, javascript, hotspots, and various other outdated web technologies.

I wanted to show that modern CSS could be used to exactly reproduce their design, because often developers scream that they can not make accessible designs attractive or match business objectives.

Enter css Zen Garden

The css Zen Garden is about showing what is possible by using only CSS for design. The idea here is that designers can create their own CSS file, but not touch the existing single HTML file. Each of the 400+ CSS designs is then laid over the existing HTML content. This is not how you build in the real world, but it shows just how creative you can be.

View the original - nested tables, javascript, hot spots, proprietary IE behaviors - yuck!

So I attempted to mimic the design and layout of the Athens 2004 Olympic site (or rather the way it looked a week before the games started), but sorta had to do it with my mouse hand tied behind my back. I had no control over the HTML but only the CSS.

So my final design is not exactly the same, but it’s damn close and unlike the original works well in Win IE 5, 5.5, &6 , Mozilla 1.6, FireFox .92, Netscape 7, and Opera 7. The Athens 2004 site had many problems in non-IE browsers. I even found it was possible with CSS to mimic a scrolling content box and have it work in all the browsers, theirs - nope.

So long story short, there is no reason not to get hip on web standards and accessible design, the only thing holding you back is yourself.

This entry was posted on Tuesday, September 14th, 2004 at 5:37 pm and is filed under Design. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.