WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Define or Caption the Photos

for

Number of posts in this thread: 4 (In chronological order)

From: ranpope
Date: Mon, Nov 24 2008 2:45PM
Subject: Define or Caption the Photos
No previous message | Next message →

I use the definition list to caption still photos. For example:

<dl>
<dt>(Image)</dt>
<dd> (Photo description)</dd>
</dl>

Would this be a acceptable way to caption the still photo for the screen readers?

Randy

From: Jared Smith
Date: Mon, Nov 24 2008 3:35PM
Subject: Re: Define or Caption the Photos
← Previous message | Next message →

On Mon, Nov 24, 2008 at 2:44 PM, < = EMAIL ADDRESS REMOVED = > wrote:
> I use the definition list to caption still photos. For example:
>
> <dl>
> <dt>(Image)</dt>
> <dd> (Photo description)</dd>
> </dl>
>
> Would this be a acceptable way to caption the still photo for the screen readers?

Acceptable? Sure. Optimal? Maybe not. The problem with using a list is
that the screen reader often identifies the beginning of the list and
in this case it's a list with one item. It's just a lot of overhead
for users for something that is questionably not a term/description
anyway.

Additionally, if the photo description is the alternative for the
image, then the image should be given null alternative text (alt="") -
otherwise the alternative will be presented twice. I'm not exactly
sure how a screen reader will react to an definition term (<dt>) that
is functionally empty, but it probably is not good. In other words, if
the image has null alternative text, you essentially have a definition
for nothing.

Unfortunately HTML does not provide a very good mechanism for making
this association, but I think the definition list approach is probably
a bit overkill for something as simple as a photo caption. I've never
had a screen reader user complain about having the caption immediately
after the image even though there is no direct or semantic association
between the caption and the photo. Vicinity itself is probably
adequate.

Jared Smith
WebAIM

From: Benjamin Hawkes-Lewis
Date: Tue, Nov 25 2008 12:55AM
Subject: Re: Define or Caption the Photos
← Previous message | Next message →

= EMAIL ADDRESS REMOVED = wrote:
> I use the definition list to caption still photos. For example:
>
> <dl>
> <dt>(Image)</dt>
> <dd> (Photo description)</dd>
> </dl>
>
> Would this be a acceptable way to caption the still photo for the screen readers?

Given how hard it is to design good user agent behavior for the poorly
defined DL element, I'd tend to avoid it except for:

1. Lists of terms and definitions.
2. Dialogs.

Which are both uses blessed explicitly in the HTML4 specification.

I'd go for:

<img alt="{Text equivalent}" src="photo.jpg">
<p>{Caption for people who have read the text equivalent or seen the
image}</p>

See also:

Mark Norman Francis on problems with DL's definition:
http://24ways.org/2007/my-other-christmas-present-is-a-definition-list

Screen reader implementation report for DL:
http://www.webaim.org/discussion/mail_message.php?id=11226

(Note that report preceded the release of Window-Eyes 7 and JAWS 10.)

Draft figure microformat pattern:
http://microformats.org/wiki/figure

--
Benjamin Hawkes-Lewis

From: Dean Hamack
Date: Tue, Nov 25 2008 11:55AM
Subject: Re: Define or Caption the Photos
← Previous message | No next message

On 11/24/08 11:50 PM, "Benjamin Hawkes-Lewis" < = EMAIL ADDRESS REMOVED = >
wrote:

> I'd go for:
>
> <img alt="{Text equivalent}" src="photo.jpg">
> <p>{Caption for people who have read the text equivalent or seen the
> image}</p>

That's exactly how I do it. Anytime I have multiple photos, I put each photo
and paragraph tag inside a list-item tag as well.