WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Graphics and Captions

for

From: Jukka K. Korpela
Date: Jan 21, 2006 2:15AM

On Fri, 20 Jan 2006, Kynn Bartlett wrote:

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

But you could use a simple table, putting an image inside a cell and the
caption inside another, or even a single-cell table with the caption
inside a <caption> element. This is a little trickery, but before
rejecting it as using "tables for layout" (it actually isn't), consider
the other options: they mean using _semantically empty_ (or perhaps even
semantically wrong) markup, as opposite to table markup that is at least
vaguely semantic: <table> markup indicates some relationships between
data.

> 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>

A containing element is useful (and perhaps indispensable) for styling
(and for compliance to a Strict DTD), but it implies nothing semantically,
apart from creating a block. There's probably not much practical
difference between using a <div> and using a <table> for an image and its
caption, except that they require a bit different approaches in styling.

In practice, other considerations (such as ease of styling and the
rendering in the absence of styling) are more important, so <div> might be
just as good. But don't get lured into a mode of thinking where <table> is
bad just because you're not working with tabulated numbers.

But using <p> for a caption is usually illogical - the caption does not
usually constitute a _paragraph_ - and creates unnecessary (though small)
problems in styling. A <p> element normally has default top and bottom
margin, and may have some presentational idiosyncracies due to a user
style sheet, and all of this is probably unwanted here. Using <div>
would be preferable to _semantically wrong_ markup.

For accessibility, the roles of the caption and the alternate text (alt
attribute) are a difficult problem. The source of the problem is that the
caption will appear even when the image will not; this is one of the
shortcomings of the idea behind the alt attribute. This implies that if
you have a non-essential image (such as a photo in a news article, so that
the photo is just illustration and gives no new information), you should
use alt="" if there is no caption but something like alt="(photo)" if
there is a caption - otherwise the caption could create a mystery.

For some techniques, including a comparison of various markup methods, see
http://www.cs.tut.fi/~jkorpela/www/captions.html

> <img src="foo.gif" alt="alt for foo" longdesc="#foocaption">

The longdesc attribute is futile or worse. You spend time in setting it
up, gaining virtually nothing, and you easily forget to make the long
description _accessible_ in most browsing situations (that is, on all
browsers not supporting longdesc, i.e. on almost all browsers).

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

And don't even spend time in mentioning the longdesc attribute.

> 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>."

Nope. First, there is no really adequate markup, but you need to use some,
so you should consider what is least inadequate. Second, <div> is not
logical grouping; it is purely syntactic grouping (and presentational in
the sense that it implies line breaks).

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/