Mon, 2005-07-11 10:38
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
Mon, 2005-07-11 11:08
#1
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
Mon, 2005-07-11 11:50
#2
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.
Mon, 2005-07-11 12:16
#3
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.
Mon, 2005-07-11 13:03
#4
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.
Mon, 2005-07-11 13:24
#5
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>
Mon, 2005-07-11 13:56
#6
Using a caption with an image - accessibility
Lorraine, - no need for apologies! my first post was confusing!
Thanks for the links.