This is cool. Basically, this is a tool which studies the tag structure of your site and communicates it as a color-coded series of interconnected tags. Although this has little to do with web accessibility, it is an interesting way to visually communicate generalities about the structure of a website.

If you read the original post by Aharef (get the funny joke in his handle?), you’ll get the opportunity to look at a variety of interesting graphs of major sites: BoingBoing, Yahoo, Google, and so on.

Although part of what I like about this is the elegance of watching the tool gradually display the structure of your page, I also find that it provides an interesting view into the overall style of building a page. A very focused site, such as BoingBoing, has a very straightforward graph. A vast density of links, but little else. The sprawling monster which is Yahoo.com provides an equally sprawling graph.

Here’s Joe Dolson Accessible Web Design:

JoeDolson.com as a graph

Here, you can see this site in all it’s glory: sparing of <div> tags (green), the site predominantly consists of blue and gray tags: links and “other” tags. The “other” category includes <p>, so that’s probably the majority of what you see there. I feel pretty good about this graph: it’s straightforward and simple.

Still, the tool could be made even better: I’d love to be able to produce graphs where I chose the color coding pattern for particular tags. I could set all non-semantic tags to be bright red, to easily spot the condition of a site in that respect. I could focus my attentions on inline versus block elements, or I could differentiate between different levels of headings.

Or, of course, I could look with an eye to the prettiest graph I could come up with for my site. ๐Ÿ™‚