Tag Clouds considered harmful

Recently, while solving a presentation issue of a tag cloud we have created for one of our customers, I have stumbled upon an article on Tag Clouds by Mark Norman Francis. While I’ve been following the trends quite blindly, I have to admit, I haven’t really though on the accessibility of Tag Clouds - one of the youngest and most popular navigation forms.

So what’s the whole fuzz about? The whole idea of a tag cloud is to make it visually clear which words or phrases are the most popular on particular web site, which keyword is most frequently used and so on. Using various font sizes and optionally some other formatting you can point visitors to the most popular content on your web site. While there is no rocket science behind formatting the tag clouds to get the desired result, take a minute to think about how would you present the same information if all you had was HTML and CSS…

Mark presents a few various approaches he has found. First of all a paragraph full of text:

<div class="alphacloud">
  <a href="/tag/.net" class="lb s2">.net</a>
  <a href="/tag/advertising" class=" s3">advertising</a>
  <a href="/tag/ajax" class=" s5">ajax</a>
</div>

It’s really far from the ideal situation. First of all there is no separation of particular links, so a screen reader could spit it out as one sentence. Second of all, the markup above doesn’t give you any hint about the importance of particular link.

While Mark presents some other examples as well, one of them has taken my attention in particular - multiple nested em’s. Imagine asking your screen reader to read the page for you and then all of a sudden having it yelling at you: Christmaaaaaas!!!!!!!

So are tag clouds really useless or is there still a hope? In his answer to various, poor tag clouds examples, Mark presents his own approach: an alphabetically ordered list with extra description (hidden in an accessible way) attached to it. Looking at the example, I thought of another approach. Would be really bad to double to content and present each tag cloud as two lists? First of all I would copy the example as presented by Mark. But then I would add another list and order the tags descending on popularity, so that the visitors would be able to get to the most popular content as first. Obviously this list would be hidden from not visually impaired visitors to keep the visual experience the same. To improve the navigation of both list I would add skip links before both lists: the visitors could self choose whether they are looking for a particular tag (alphabetical list) or for the most popular content (hits ordered list).

What do you think of that idea: is doubling the content a fair price to pay for the extra piece of accessibility of did I totally miss the point?