How to add a caption to an ornamental image
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> than on an
<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.