How should you add a caption to an ornamental image? You should aim to make it disappear whenever the image disappears.

If you put the caption into the HTML as normal text (e.g., in a <p> element), what happens if images are disabled? You end up with meaningless text floating around. (Consider, say, a news story with a caption that quotes someone in the image, when the quote has already appeared in text anyway.)

You can't put the caption in the alt attribute. That should be the functional equivalent of the image in textual form, which (since the image is ornamental) is nothing at all.

You can't link to the caption in the longdesc attribute. That is for describing the image if it cannot be seen. And that description might serve little purpose if the image is purely ornamental.

This leaves you with the title attribute. You can then express in CSS that the title should be extracted and used as generated content in the page. Some browsers will even display the title when you hover over the image, so it will be accessible even without CSS.

Here's what I like to do, taking a right-floating image as an example.

Start with an <img> element, with the actual width and height, an empty alt, some nice visual properties in the absence of CSS, and the caption as the title:

<img src="ufo3.jpg" width=240 height=180 alt=""
  border=2 hspace=1 vspace=1
   title="Is this finally the proof we seek?">

Now, for a visual environment, apply a style that puts the title into content:

img:after {
  display: block;
  text-align: center;
  content: attr(title);
}

For robustness, you could wrap the image up in a few <div>s, as support for CSS features like generated content and max-width (if you're going to apply that too) might be better on a <div> <img>:

<div class="captioned right"
     title="Is this finally the proof we seek?">
  <img align="right" >
</div>

Change the CSS too:

div.captioned:after {
  display: block;
  content: attr(title);
}

div.captioned.right {
  float: right;
}

div.captioned img {
  float: none; /* override <img align="right"> */
}

Note that the title must now appear in the <div>, but still doesn't appear as regular content if CSS is disabled.

Of course, with this technique, you have to be prepared for the caption not being shown to the reader at all, so the text which it accompanies must be able to stand alone.

Cases

There are no relevant cases at the moment.