WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Graphics and Captions

for

From: Kynn Bartlett
Date: Jan 20, 2006 1:15PM

On 1/20/06, <EMAIL REMOVED>
> My question is this: is there specific html for displaying
> captions (similar to <blockquote>)?

Not really, unfortunately.

> So should I be defining a class in the CSS or
> redefining an existing html tag?

For now -- lacking appropriate markup (HTML is too limited at present)
-- you should at least make sure they're grouped together within at
least one containing element, as this provides markup-level context:

<div class="imageandcaption">
<img src="foo.gif" alt="alt for foo">
<p class="caption">Caption for foo</p>
</div>

Now, there are a few alternatives you could use, but of course, none
of them are really "right."

If it's an image lacking a longdesc, and the caption itself is
sufficiently detailed (most captions are NOT) to be a longdesc:

<div class="imageandcaption">
<img src="foo.gif" alt="alt for foo" longdesc="#foocaption">
<p class="caption" id="foocaption">Caption for foo</p>
</div>

If browsers were magic, or if someone in the far future is as clever
as me, you can use <a> links:

<div class="imageandcaption">
<a id="fooimage" link="#foocaption" rel="caption">
<img src="foo.gif" alt="alt for foo">
</a>
<a id="foocaption" link="#fooimage" rev="caption" class="caption">
<p>Caption for Foo</p>
</a>
</div>

Of course, this has the nice effect of NOT WORKING IN ANY BROWSERS,
because I just made it up. So don't do this.

Even more snazzy is mixing in XLink and XPath into your XHTML. Again,
ha ha, doesn't work.

And although it's tempting, DON'T do this:

<div class="imageandcaption">
<img src="foo.gif" alt="Alt for foo" id="fooimage">
<label for="fooimage">
<p class="caption">Caption for Foo</p>
</label>
</div>

It's how HTML really should work, except it doesn't -- and this would
be an abuse of the <label> element, and it doesn't do anything for you
anyway. (<label> is only for form elements.)

So, your answer really is: Ignore everything I wrote here except my
first two paragraphs, where the answers were "(a) no, there's not any
appropriate markup, and (b) the best you can do is group them together
logically as sibling elements in a <div>."

Hope this helps some.

Oh, one last note: Do go ahead and use a class, as I've done above,
to STYLE your captions to look like whatever you want captions to look
like. Do NOT, however, assume that the use of an arbitrary class,
even one with a name like "caption" or "imageandcaption", is imparting
any sort of significant SEMANTIC or SYNTACTIC meaning when you use it.
It's not. The class attribute should be considered as presentational
markup and not used to convey anything beyond appearance.

--Kynn