WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: IMG with a caption?

for

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

From: Glenda
Date: Thu, Mar 03 2005 1:21PM
Subject: IMG with a caption?
No previous message | Next message →


I having a brain freeze -- is there a way to add a caption under an img??
Yes, it would be in addition to an ALT. Just need a quick way to add a
brief description for sighted users.

Cheers,
Glenda
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.6.0 - Release Date: 3/2/05

From: Christian Heilmann
Date: Thu, Mar 03 2005 1:38PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

glenda wrote:

>I having a brain freeze -- is there a way to add a caption under an img??
>Yes, it would be in addition to an ALT. Just need a quick way to add a
>brief description for sighted users.
>
>
>
There is no HTML element or attribute for that, that would make a
connection between the image and the caption. The caption element is for
tables exclusively.

One option would be to nest the image in the same paragraph, at least
then it has the same element. Setting the image display to block in
the CSS will show it above the text.

From: Jens Meiert
Date: Thu, Mar 03 2005 1:41PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

> I having a brain freeze -- is there a way to add a caption under
> an img??

As far as I know, there is no standardized way to do this. Some people abuse
Ruby markup [1] for this purpose, but I don't encourage this proceeding.


Jens.


[1] http://www.w3.org/TR/ruby/


--
Jens Meiert
Information Architect

http://meiert.com/

From: Glenda
Date: Thu, Mar 03 2005 1:50PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

Thanks, that explains why I couldn't find any option in my reference book.
Funny, there's ALT for blind users, but nothing simple for sighted users.

Glenda

-----Original Message-----
From: lists38 [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, March 03, 2005 1:12 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] IMG with a caption?



glenda wrote:

>I having a brain freeze -- is there a way to add a caption under an img??
>Yes, it would be in addition to an ALT. Just need a quick way to add a
>brief description for sighted users.
>
>
>
There is no HTML element or attribute for that, that would make a
connection between the image and the caption. The caption element is for
tables exclusively.

One option would be to nest the image in the same paragraph, at least
then it has the same element. Setting the image display to block in
the CSS will show it above the text.

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

--
No virus found in this incoming message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.6.0 - Release Date: 3/2/05

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.6.0 - Release Date: 3/2/05

From: Joelle Tegwen
Date: Thu, Mar 03 2005 1:54PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

I like to use a for this with the image in the dt and the caption in
the dd.

I got the idea from:
http://www.maxdesign.com.au/presentation/definition/index.cfm
YMMV (Your mileage my vary)

Joelle

-----Original Message-----
From: glenda [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, March 03, 2005 2:29 PM
To: WebAIM Discussion List
Subject: [WebAIM] IMG with a caption?



I having a brain freeze -- is there a way to add a caption under an img??
Yes, it would be in addition to an ALT. Just need a quick way to add a
brief description for sighted users.

Cheers,
Glenda
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.6.0 - Release Date: 3/2/05

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

From: Christian Heilmann
Date: Thu, Mar 03 2005 2:00PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

glenda wrote:

>Thanks, that explains why I couldn't find any option in my reference book.
>Funny, there's ALT for blind users, but nothing simple for sighted users.
>
>
The alt attribute is also there for user agents without images. Not only
blind people. It also applies when the image can't be loaded or found.
Ah, the good old days with Netscape 3 and a 28.8 modem...

From: Jukka K. Korpela
Date: Thu, Mar 03 2005 2:04PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

On Thu, 3 Mar 2005, lists38 wrote:

> There is no HTML element or attribute for that, that would make a
> connection between the image and the caption.

That's what he have to live with, unfortunately. But there are many
possible workarounds, see
http://www.cs.tut.fi/~jkorpela/www/captions.html

> The caption element is for tables exclusively.

That's correct, but a single-cell table is one of the workarounds,
and it has the nice feature that you can put the caption text before the
image (hence before the alt text, in non-visual rendering) but visually
position it below the image (the common presentation for image captions),
using . It might be better to read the caption
text before the alt text, since the caption is by its nature often more
explanatory. Especially for content images, we often need to restort to
alt texts that aren't real alternatives but just short descriptions or
names for the image.

> One option would be to nest the image in the same paragraph, at least
> then it has the same element. Setting the image display to block in
> the CSS will show it above the text.

Yes, but authors normally want to make the text appear below the image in
a particular way in visual rendering, and this usually means that you need
some more elaborated markup.

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

From: Glenda
Date: Thu, Mar 03 2005 2:12PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

Thanks. Yes, I am aware of all the benefits of alt. Just didn't have time
to list them all since that wasn't my point.

-----Original Message-----
From: lists38 [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, March 03, 2005 1:35 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] IMG with a caption?



glenda wrote:

>Thanks, that explains why I couldn't find any option in my reference book.
>Funny, there's ALT for blind users, but nothing simple for sighted users.
>
>
The alt attribute is also there for user agents without images. Not only
blind people. It also applies when the image can't be loaded or found.
Ah, the good old days with Netscape 3 and a 28.8 modem...

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

--
No virus found in this incoming message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.6.0 - Release Date: 3/2/05

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.6.0 - Release Date: 3/2/05

From: reply-to:to:subject:in-reply-to:mime-version:content-type:content-transfer-encoding:references;
Date: Thu, Mar 03 2005 3:22PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

Would encapsulation in a definition list, with the img in the and
the caption in the , be considered an acceptably accessible
solution? This may only make sense semantically if you have multiple
(rather, a list of) images. The list would need to be styled as well
to achieve the layout desired.

christian

On Thu, 03 Mar 2005 21:12:20 +0000, lists38 wrote:
>
> glenda wrote:
>
> >I having a brain freeze -- is there a way to add a caption under an img??
> >Yes, it would be in addition to an ALT. Just need a quick way to add a
> >brief description for sighted users.
> >
> >
> >
> There is no HTML element or attribute for that, that would make a
> connection between the image and the caption. The caption element is for
> tables exclusively.
>
> One option would be to nest the image in the same paragraph, at least
> then it has the same element. Setting the image display to block in
> the CSS will show it above the text.
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>
>

From: Michael Moore
Date: Thu, Mar 03 2005 4:04PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

not sure if anyone has suggested this solution yet, sorry if it is a repeat.



Caption text here


By placing everything within an the enclosing div and setting its width
the caption will be displayed below the image because its width is the
same as the div. The alt could be "" if the caption is an appropriate
description or it could be something complementary. It should not be a
duplicate. In the example above a screen reader would read the alt first
then the caption.

Mike

christian.bradford wrote:
> Would encapsulation in a definition list, with the img in the and
> the caption in the , be considered an acceptably accessible
> solution? This may only make sense semantically if you have multiple
> (rather, a list of) images. The list would need to be styled as well
> to achieve the layout desired.
>
> christian
>
> On Thu, 03 Mar 2005 21:12:20 +0000, lists38 wrote:
>
>>glenda wrote:
>>
>>
>>>I having a brain freeze -- is there a way to add a caption under an img??
>>>Yes, it would be in addition to an ALT. Just need a quick way to add a
>>>brief description for sighted users.
>>>
>>>
>>>
>>
>>There is no HTML element or attribute for that, that would make a
>>connection between the image and the caption. The caption element is for
>>tables exclusively.
>>
>>One option would be to nest the image in the same paragraph, at least
>>then it has the same element. Setting the image display to block in
>>the CSS will show it above the text.
>>
>>----
>>To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>>
>>
>
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>
>
>
>

From: Jukka K. Korpela
Date: Thu, Mar 03 2005 10:58PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

On Thu, 3 Mar 2005, christian.bradford wrote:

> Would encapsulation in a definition list, with the img in the and
> the caption in the , be considered an acceptably accessible
> solution?

It would be semantically absurd and it would not achieve any useful
default layout rendering, so it is clearly inferior to using, say,
just div elements.

If a speech-based browser implemened a according to its defined
semantics (ignoring any examples in the specification that contradict
that), it would be natural to read
xxxyyy
as follows: "Definition list. Term: xxx. Definition data: yyy.
End of definition list." Current browsers probably don't do that,
but would you really like to _fear_ that some browsers start
behaving by the specs?

> This may only make sense semantically if you have multiple
> (rather, a list of) images.

No, it would not make sense semantically in any case. The number
of images is not the issue; a list can have just one element, though
it's a rather pathetic list. But neither an image nor its caption
is a term being defined. Well, except in a contrived example like the
following:

a fundamental property of matter
where mass.gif is an image that consists of the word "mass"
in some appearance.

> The list would need to be styled as well to achieve the layout desired.

The element is in practice just a visual layout trick, and a coarse
and unreliable at that. Here you wouldn't even _want_ to have the layout
people usually expect to get when they use the trick. Besides,
is more difficult to style than most elements, since its default
rendering is complicated and hard to describe, and there are quirks
in CSS implementations that make the styling even harder.

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

From: Jukka K. Korpela
Date: Thu, Mar 03 2005 11:13PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

On Thu, 3 Mar 2005, mmoore wrote:

> not sure if anyone has suggested this solution yet, sorry if it is a repeat.
>
>
>
> Caption text here
>

It's one of the options, though you should use the correct syntax
(no "px" in HTML attribute values), and it's questionable whether
paragraph markup is best here. Semantically, a caption is seldom
really a paragraph, so would be better. Presentationally,
paragraph elements usually have default top and bottom margin,
so here the image would be separated from its caption, making
it more difficult they they belong together. Although you could
easily remove the top margin using CSS, people with disabilities
may well have disabled CSS support or overridden page style sheets
in favor of a user style sheet designed for the user's needs.
Moreover, you can do nothing practical to prevent speech browsers
from making a short pause before a paragraph if they have been designed
to work that way.

> The alt could be "" if the caption is an appropriate
> description or it could be something complementary.

But that would be rare. If an image has a caption, it is probably a
content image and the caption text just describes what the image is
about, instead of conveying its full message. So the odds are that
it would be better to have the caption read first, giving those
users who have _some_ way of accessing images (maybe the user is
just surfing with images disabled?) a basis for deciding whether to
try to access this particular image.

Unfortunately, there's no way to suppress a caption in non-visual
rendering except by making the caption part of the image (which
creates problems of its own). For example, if your page contains
some article that tells about some meeting and is illustrated
by a photo of the meeting, with a caption, then both the photo
and the caption should probably be omitted in non-visual rendering.
In that case it's probably the least of evils to use a short alt
text like "(photo of the meeting)". Without the caption, we could
use just alt="".

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

From: Rob Unsworth
Date: Fri, Mar 04 2005 5:55PM
Subject: Re: IMG with a caption?
← Previous message | Next message →

On Thu, 3 Mar 2005, glenda wrote:

> I having a brain freeze -- is there a way to add a caption under an img??
> Yes, it would be in addition to an ALT. Just need a quick way to add a
> brief description for sighted users.

Glenda,
Taken from a site I am working on where the image is floated left, You can
adjust to meet your situation. Go to the site in my sig to see it working.


Caption

..img-left {
float:left;
margin-right:15px;
margin-bottom:5px;
text-align:center;
font-size:80%;
}


--
Regards, | Lions District 201 Q3
Rob Unsworth | IT & Internet Chairman
Ipswich, Australia | http://www.lionsq3.asn.au
-------------------------------------------------

From: Webmaster
Date: Sat, Mar 05 2005 12:47AM
Subject: Re: IMG with a caption?
← Previous message | Next message →

Thanks Joelle! Great article. As for the ALT, it also shows the short
text for the sighted readers when the pointer is over an image. I know
it works on IE, but on Firefox ALT does not show anything.

So I add TITLE. For example <img src="someimage.png" ALT="some image
short description" TITLE="some image short description"> Then the
description appears both on IE and Firefox. I do not know if it is right
or wrong way to do it (any idea?), but at least the text appears on both
IE and Firefox.

brgds A.

Joelle Tegwen wrote:
> I like to use a for this with the image in the dt and the caption in
> the dd.
>
> I got the idea from:
> http://www.maxdesign.com.au/presentation/definition/index.cfm
> YMMV (Your mileage my vary)
>
> Joelle
>
> -----Original Message-----
> From: glenda [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Thursday, March 03, 2005 2:29 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] IMG with a caption?
>
>
>
> I having a brain freeze -- is there a way to add a caption under an img??
> Yes, it would be in addition to an ALT. Just need a quick way to add a
> brief description for sighted users.
>
> Cheers,
> Glenda
> --
> No virus found in this outgoing message.
> Checked by AVG Anti-Virus.
> Version: 7.0.308 / Virus Database: 266.6.0 - Release Date: 3/2/05
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>
>

From: Tim Beadle
Date: Mon, Mar 07 2005 2:02AM
Subject: Re: IMG with a caption?
← Previous message | No next message


"webmaster29" < = EMAIL ADDRESS REMOVED = >
wrote on 05/03/2005 07:47:27:
> Thanks Joelle! Great article. As for the ALT, it also shows the short
> text for the sighted readers when the pointer is over an image. I
know
> it works on IE, but on Firefox ALT does not show anything.

That's correct. Firefox does the right thing with
ALT text - it's an alternative. Unfortunately, people expect FF to behave
like IE, which uses ALT text for tooltips and is wrong.
&nbsp;
> So I add TITLE. For example <img src="someimage.png"
ALT="some image
> short description" &nbsp;TITLE="some image short description">
Then the
> description appears both on IE and Firefox. I do not know if it is
right
> or wrong way to do it (any idea?), but at least the text appears on
both
> IE and Firefox.

Wrong, I'd say, but I'm a bit of a purist in this regard. Would this confuse
a screenreader, or lead to the text being read out twice? Either way, IE's
"ALT-text in tooltips" is wrong. Did I mention that already...?
:)

If you want tooltip text to appear in both IE and
FF, use the title attribute. This applies to any element that legally takes
the title attribute, not just IMG.

Regards,

Tim

Institute of Physics
Registered charity No. 293851
76 Portland Place, London, W1B 1NT, England

IOP Publishing Limited
Registered in England under Registration No 467514.
Registered Office: Dirac House, Temple Back, Bristol BS1 6BE England

This e-mail message has been checked for the presence of computer viruses.