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.
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.
- Q: Is this thing supposed to give an authoratative assessment? A: No. The Ziggurat is intended to give you an initial feeling for accessibility and semantics. A full accessibility assessment of a web page takes a lot of time and energy.
- Q: How do you get a page back to normal? A: After blasting a page with the Ziggurat, the back button should return the page to normalcy.
- Q: What about framed pages? A: The Ziggurat barfs on framesets, but not inline frames. Inline frames become a link to the framed page. The link text is the frame's title attribute text, or a question mark if none is found.
- Q: Will it ever perform slowly or bog down my browser? A: On really long or bloated web pages, the Ziggurat may bog down the processor for a few moments because of the fact that it runs regular expressions against
document.body.innerHTML. On the average desktop computer with the average web page it shoudn't cause any problems. - Q: After running does it destroy the ability to use the page? A: For the most part, an accessible page should still be more or less usable after the Ziggurat gets done with it. An exception to this is pages read directly from the local filesystem by the browser, in which case the links might not work.
- Q: Does it do any validation? A: The Ziggurat doesn't do any type of markup validation. There are other tools for that. The focus is just on examining markup structure.
- Q: Does it ever break on wierdly built pages? A: The Ziggurat actually fails on this page (the one you're reading now). Oddly enough, this happens when it encounters itself embedded in the code. It experiences some sort of John Malkovich moment and quits. Very occasionally I find that it fails on a page, especially when a lot of content is embedded in JavaScript strings. It also doesn't give much info on pages that are mostly done in Flash, but that in itself can be useful information.
- Q: What tags and attributes get stripped out? A: These are some of the tags and attributes that are stripped out completely by the Ziggurat. Tags:
<font>,<center>,<blink>,<big>,<small>,<hr>,<b>,<i>,<u>,<object>,<embed>,<nobr>,<map>,<br>. Attributes:border,color,valign,align,bgcolor,color,background,width,height,cellpadding,cellspacing,style,onmouseover,onmouseout,onload,onclick,onkeypress,nowrap,shape,coords. All attributes are stripped from the<body>tag. Note that when a tag is stripped, the content nested between opening and closing tags isn't removed, just the tags themselves. Also note that many tags are not removed, but rather altered or replaced by something that attempts to represent structure. Some examples of this are: images changed to text, inline frames becoming labeled links, image map areas becoming links, and noscript blocks being replaced by a labeled block-level element. - Q: Scripts may be stripped out, but what about lingering structural changes made to the DOM by scripts before the Ziggurat ran? A: From the Ziggurat's point of view, dynamically made changes to the DOM are indistinguishable from the original HTML structure.