There are no relevant cases at the moment.
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.
There are no relevant cases at the moment.