Captions can be displayed in a semantic way using the :after pseudo-class and the content declaration to display the image’s alt text as a caption. The basic CSS is pretty simple, but you can of course style this caption any way you want. A simple example:

img:after{
	content: attr(alt);
	/* Below is just caption styling */
	display: block;
	text-align: center;
	padding-top: 1em;
}

This is known to fail in some browsers, such as Safari 3.2.1 and Internet Explorer, but works in others. Opera 10 has been confirmed to work by me, while Firefox 2.0.0.17 fails. If you’ve tried it in another browser, let me know. Also, there’s a demo over here.

Well, lately I’ve been attracting more visitors, mainly because I’ve started to build up a presence on the internet – most referrals are twitter URL collectors such as twitturls and twitturly, but some are from blogs I’ve commented on and similar things. However, this slight increase in popularity has, as you can see, come with a quite astonishing increase of spam. In about ten days the amount of spam caught every day by Akismet increased tenfold, going from 20 comments every day (which is quite a lot to start with) to a whopping 210 caught spam comments around December 31st.

I think the problem is solved now though, since I installed the reCAPTCHA plugin for WordPress – it’s a trade-off, of course, since you now have to enter more text when you comment, but overall it’s a pretty good idea because it means less false positives will be lost forever in an endless torrent of spam. On a side note, I think some spam bots might be using an IE5.5 user-agent header, because my stats script is picking up an awful lot of them. But I digress.

A graph is not something you should try to represent with HTML. Best practice in this case would, IMO, be to store the graph in some handy image format (PNG is recommended) and display it using an img element. This is more semantically correct, takes less time to do, probably works better cross-browser and is a better solution from a screen-reader’s point of view. If you use the alt attribute correctly, that is. Have a look at this extremely simple example, quite adequately matching that of the Wojo Group:

<img src="/wp-content/uploads/wojo-graph.png" alt="Stacked Bar Graph showing something over the course of twelve days">

And in case you wondered, it’ll produce something like this: