The Ziggurat: A tool for web standards and accessibility assessment

The Ziggurat gives an at-a-glance assessment of a website's structural markup. Here are Buy.com and Chevrolet.com, as seen through the Ziggurat.

buy.com is not accessible and not standards compliant, but chevrolet.com IS accessible and standards compliant.

Explanation

When one is interested in web standards and accessibility, one frequently finds one's self peeking under the hood of a website, just to see what kind of stuff it's made of. Does it use tables for layout? Does it use alt attributes? Was any thought given to semantics and structure? The Ziggurat gives one an instant visual assessment of these and a few other things.

How does it work? The Ziggurat takes a web page, mercilessly strips out all style sheets, scripts and presentational markup it finds, then takes what's left and turns it into an exploded diagram so that you can see what's going on structurally. All table cells and block-level elements become visible. Elements with semantic significance are color coded, semantically generic elements remain grey. Images are represented by their alternative text or a question mark if no alt text is found. Nested tables and other forms of markup bloat lend the appearance of a ziggurat to many sites, hence the name. You really have to see it to understand it.

Installing and using the Ziggurat

The Ziggurat is a favelet, or bookmarklet, which is just a bit of JavaScript in a link. You can install it by dragging this link to your bookmarks toolbar:

drag this to your bookmarks toolbar » The Ziggurat

Once installed, feel free to rename it to something other than “The Ziggurat”. For example on my toolbar it's labeled asplode. Use the Ziggurat by clicking the bookmarklet while viewing a web page you'd like to examine.

Notes & FAQs

Browser Requirements! The Ziggurat should work in browsers that have solid support for CSS2, regular expressions, and the data: protocol. This rules out all Windows-based versions of Microsoft Internet Explorer released before 4/8/2005. I know that it works in all newer Mozilla variants and have been told that it works in Safari. Beyond that I don't know.

Valid XHTML Valid CSS Valid Atom