associating captions with images

[Andrew Crowe]

Hi,

Is there a recomeded way of associating a piece of caption text with it's
image? (something like the <label> tag for form elements).

It's basically just a usability consideration as it's always recomended to
link together related content (such as using labels for form elements). As
the caption is visible onscreen the longdesc attribute doesn't really seem
to apply.

 

[Jukka K. Korpela]

Is there a recomeded way of associating a piece of caption text with
it's image?

No. Such markup has been proposed long ago, but not accepted or
implemented.

If you like, you could use

<table><caption>Caption text</caption>
<tr><td><img src="..." alt="..."></td></tr>
</table>

(and use <caption align="bottom"> if desired)
but it doesn't really mean associating a caption with an image.

 

[Toby A Inkster]

It's basically just a usability consideration as it's always recomended to
link together related content (such as using labels for form elements). As
the caption is visible onscreen the longdesc attribute doesn't really seem
to apply.

The longdesc attribute can take any URLs -- i.e. fragment identifiers are
allowed:

<img src="potato.jpeg" alt="Potato diagramme" longdesc="#potCaption">

<div class="caption" id="potCaption">
Diagramme showing all the important parts of a potato.
</div>

 

[Kris]

Is there a recomeded way of associating a piece of caption text with
it's image?

[/QUOTE]

If you like, you could use

<table><caption>Caption text</caption>
<tr><td><img src="..." alt="..."></td></tr>
</table>

(and use <caption align="bottom"> if desired)
but it doesn't really mean associating a caption with an image.

Would a table like this not be a similar solution?

<table>
<tr>
<td><img ..></td>
</tr>
<tr>
<th>Caption text</th>
</tr>
</table>

 

[Jukka K. Korpela]

Would a table like this not be a similar solution?

Yes, that's another approach.

<table>
<tr>
<td><img ..></td>
</tr>
<tr>
<th>Caption text</th>
</tr>
</table>

You would probably want to us
th { font-weight: normal; }
since most browsers by default bold <th> elements, and that's usually not
desirable for image captions.

 

[Kris]

<table>
<tr>
<td><img ..></td>
</tr>
<tr>
<th>Caption text</th>
</tr>
</table>

You would probably want to us
th { font-weight: normal; }
since most browsers by default bold <th> elements, and that's usually not
desirable for image captions.[/QUOTE]

And text-align:left; perhaps. Since we are on images and captions
anyway, a note on alt texts to the OP (if he is still reading): since
your caption can in fact contain a good and detailed description of the
photograph, it often suffices to use alt="" on the image. However, if
the image itself has an additional function here, like linking to the
next image, being enclosed in an anchor, use alt="Next image" or
whatever is appropriate.

 

[Spartanicus]

since
your caption can in fact contain a good and detailed description of the
photograph, it often suffices to use alt="" on the image.

Which orphans the caption if accessed sans images, bad idea.

 

[Jukka K. Korpela]

Which orphans the caption if accessed sans images, bad idea.

Besides, it is not the _purpose_ of a caption to present a text
_equivalent_ of the image.

In cases like this, alt="[picture of a cat singing]" or maybe just
alt="[picture 42]" might be the best we can do. It won't help a blind
person, or a person who cannot access the image due to network overload,
but it at least helps _some_ people (like people using a text browser to
download images for local viewing).