6 replies [Last post]
loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 10 years 37 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

There is a need on a site I am designing to put a caption under an image. This really is for people without visual impairment but what about for people without?

Is there a way of associating text with images (kind of like label in form fields) or is text the follows an image obvious to screen readers that this is associated?

I suppose the next question would be if the caption is associated with the image should I leave the ALT blank? If I use a blank ALT I thought the screen reader ignores the image - therefore it might be confusing to have a bit of text describing what is in a picture without the actual picture being there.

Any help always appreciated

Tags:
Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 1 day ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Using a caption with an image - accessibility

1) You can use <title> to associate descriptive text with an image. <alt> is used to say what the image is. Please do not put the same text in both as the screen-reader (depending on the user's preferences) could speak out both.

As in <a href=""><img src="images/new.jpg" width="162" height="82" alt="baby in nappies at a computer screen" title="tutorials for people who are brand new to computers" /></a>

Screen-readers will generally identify an image by speaking out the word 'image' - so there is no need to say image or picture in <alt> or <title>. You can leave <alt> and/or <title> null with "", if they have nothing useful to say about the image - such as an image that is being used purely for eye-candy.

2) The caption beneath is a bit trickier unless the wording is precise and verbally connects the text to the image, otherwise, it could just be heard as just another piece of text, not necessarily associated with the image. For this reason, I would go the <alt=""><title="description"> route and drop the caption beneath.

HTH
Lorraine

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 10 years 37 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Using a caption with an image - accessibility

Thanks for the reply.

In this instance the caption beneath is for people without visual impairment (Just like in magazines) and needs to be there.

What I wanted to know was is there any way of associating this with the image for screen readers? Otherwise I will use the ALT attribute which would mean the screen reader would duplicate what I have.

Not such a bad thing I suppose but I'd like to get into the best practice for this.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 3 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Using a caption with an image - accessibility

AFAIK the answer to your question is no. But you raise a very valid issue. Form labels can be associated with input elements, so it would be nice if captions could be associated with pictures. If anybody can give a definitive answer to this one, one of the regulars on this forum should be able to help. However, if you always ensure that your captions follow their respective pictures in the HTML code-flow, then people using text readers should be able to cope.

Life's a b*tch and then you die!

Cyberman
Cyberman's picture
Offline
Regular
Last seen: 17 years 27 weeks ago
Joined: 2005-02-11
Posts: 37
Points: 0

Using a caption with an image - accessibility

Maybe media-dependent style sheets?
You can specify that certain styles are only to be used with screen-readers, for example.
That way you could put a block under the image, and set it to invisible for anything beside screen-readers.

http://www.w3.org/TR/REC-CSS2/media.html

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 1 day ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Using a caption with an image - accessibility

Loungepenguin wrote:
In this instance the caption beneath is for people without visual impairment (Just like in magazines) and needs to be there.

Sorry - misread the post 'cos of the two 'without's in the first sentence. :oops:

You could check out the BBC's News site for how they do it
http://news.bbc.co.uk or http://www.bbc.co.uk/news

Here are some other relevant links:
http://www.w3.org/Style/Examples/007/figures.html
http://www.webmasterworld.com/forum83/6713.htm
http://www.alistapart.com/articles/practicalcss/
http://www.cs.tut.fi/~jkorpela/www/captions.html
http://www.matthewwest.co.uk/computing/captioned_images
http://www.brainstormsandraves.com/archives/2004/01/06/float/
http://www.w3schools.com/css/tryit.asp?filename=trycss_float3

Regrettably support for aural stylesheets is very patchy among screen-reader software. Why should the developers bother to support it? Their products *only* cost up to £700 after all </sarcasm from person responsible for raising the money to buy this software for clients>

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 10 years 37 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Using a caption with an image - accessibility

Lorraine, - no need for apologies! my first post was confusing!

Thanks for the links.