As always, there is no write or wrong, just opinion. To me, a tag cloud is
simply a list of links.
Key issues are:
- Some degree of meaningful link text for screen reader users
- Colour (as mentioned in an earlier post) not used to convey critical info
- Some degree of semantic meaning of gradients (for devices that do not
support css)
This last point is hardest. Most of the tag clouds I have marked up have had
over 10 variations in size or gradients of popularity/importance. This makes
it virtually impossible to find standard elements to mark up these gradients
and still give them meaning when styles are not available.
One way would be to add meaning to the most and least popular ends of the
scale with single (not nested) <small> and <big> elements, then use classes
to do all real styling.
A rough example:
<h3>
Most popular pages:
</h3>
<ul id="tagcloud">
<li><a href="#" class="popularity10"><small>golf</small></a></li>
<li><a href="#" class="popularity12">tennis</a></li>
<li><a href="#" class="popularity10"><small>swimming</small></a></li>
<li><a href="#" class="popularity16">hockey</a></li>
<li><a href="#" class="popularity10"><small>cricket</small></a></li>
<li><a href="#" class="popularity24"><big>archery</big></a></li>
<li><a href="#" class="popularity28"><big>athletics</big></a></li>
</ul>
The tag cloud could easily be formatted into a single wrapping line to fill
a container (with space after each link) using something like:
#tagcloud { margin: 0; padding: 0; list-style-type: none;}
#tagcloud li { display: inline; margin-right: .5em; }
CSS could then be used to "zero" the <big> and <small> elements, so that the
classes could control all sizing:
#tagcloud small, #tagcloud big { font-size: 100%; }
Then, the classes could easily be sized as needed:
#tagcloud .popularity10 { font-size: 100%; }
#tagcloud .popularity12 { font-size: 110%; }
#tagcloud .popularity14 { font-size: 120%; }
#tagcloud .popularity16 { font-size: 130%; }
#tagcloud .popularity18 { font-size: 140%; }
#tagcloud .popularity20 { font-size: 150%; }
#tagcloud .popularity22 { font-size: 160%; }
#tagcloud .popularity24 { font-size: 170%; }
#tagcloud .popularity26 { font-size: 180%; }
#tagcloud .popularity28 { font-size: 190%; }
The interesting thing here is what to call the classes - as this will depend
on the type of tag cloud (popularity, most recent, highest page ranking
etc). It would also be interesting if class naming systems could be
established to allow developers to mark up tag clouds consistently across
the web. Some form of tag cloud microformat? :)
Russ
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
