I run into this problem a lot. Imagine I’ve got a picture of, say, Sam and I at a party. I’d like to post that picture here. So, I’d have the picture and then, below it, a caption saying “This is Sam and I at the Beckham’s party“. But then what should I use as the alt text on the picture? Clearly the alt text should be “Sam and I at the Beckham’s party“, or perhaps even a longer description of the image. However, then the caption is redundant; if someone browses the page with images off then it will (correctly) display the alt text in place of the picture, leaving the page saying “This is Sam and I at the Beckham’s party. Sam and I at the Beckham’s party.”
Those of you saying: appropriate alt text for that image is therefore the empty string, since there already is a caption in the HTML; what should I do if i want the image to be a link to beckhams-party.com? If I make the alt text empty then the link is unusable in text-only browsers.
Perhaps I should, for example, make the alt text empty and wrap both the image and the caption in the link, thus covering both those bases. That only works if the caption is the thing immediately following the image, though. Semantic HTML people, what would you recommend?
I would put the caption text in the alt attribute (where it belongs), then use CSS and/or JavaScript to display it after the image as a “normal” caption
Posted by zsepi on May 13th, 2005.
Dammit – I was about to suggest that
Posted by mrben on May 13th, 2005.
How would you use CSS to display it after the image? JavaScript is, er, doable, certainly, but it’s rather a sledgehammer to crack a smallish nut.
Posted by sil on May 13th, 2005.
It’s a tricky question that’s bugged me too. I’m not sure there’s an entirely satisfactory answer, but one approach is to think about the caption and the alt text in tandem.
By which I mean that the caption does not necessarily belong in the alt text. BBC News approaches this quite well: consider this story. The caption for the photo is “Manchester United fans have made their feelings clear” but the alt text is simply “Angry fans“. They could expand on the angry fans bit to describe the photo a little more, but with the two pieces of text working in tandem, the overall ‘picture’ is clear.
Posted by Richard Rutter on May 13th, 2005.
Richard: I’ve thought about that. The key point from my perspective is that the alt text, as I understand it, isn’t supposed to describe the picture, it’s supposed to be text that replaces the picture. So if you replace the picture with its alt text, the page still makes sense, and you don’t even need to know that there was a picture there. That’s all well and good as long as the picture is simply supporting the bulk of the text, but when the picture itself is a critical part of the content then it’s left a bit adrift. I reckon this is a legacy of HTML’s original design as a language for marking up academic documents, where the only images you’d have got would have been graphs :-)
Posted by sil on May 13th, 2005.
Something more to think about: IE renders alt text as tooltip while Firfox renders only ‘title’ text as tooltip.
Posted by deepak on May 13th, 2005.
You’re indeed right that the alt text is an alternative to the image, hence the attribute’s name of course. That said I think the practicality of how alt text is used is slightly different.
The reality is that images are always announced in one way or another so folks want to know what they are missing out on. I’ve been told this is particularly important to the visually impaired. That’s not say a lengthy description is necessarily required as the alt text still needs to fit into the flow of the document. Tricky stuff though.
Posted by Richard Rutter on May 13th, 2005.
zsepi: I disagree; the caption does NOT belong in the attribute. The alt attribute is meant to act as an alternative to the image – that’s why browsers aren’t meant to display it at all if images are turned on (something IE and Netscape 4 famously get wrong).
Not that I have any good answers for Stuart though. To be honest, I’m stumped.
Posted by Simon Willison on May 13th, 2005.
sil,
the
altattribute should be empty only when its image’s point is decoration. Since we do separate content and presentation, there should be no decoration images in the markup (spare for the ones added with css or javascript), hence thealtshould always contain the alternative content.To achieve your goal with CSS, all you should write is
img[alt]:after { content: attr(alt); }. However, it works not in most browsers (only managed to get it right in Opera). Ouch.Guess you have to use the sledgehammer – the problem now does resemble a nail, doesn’t it?
Posted by zsepi on May 13th, 2005.
As a point of reference, Joe Clark writes in his book “If the alt text of an image would duplicate words that immediately precede or follow the image you may use an empty alt text. A typical example of this is an About Us page that show little thumbnail photos of staff next to their names.”
Perhaps that was the answer all along, as you originally hinted.
Posted by Richard Rutter on May 13th, 2005.
To use javascript and/or css to render the alt text after the image would be very bad practice semantically seen. Rather add a title attribute and use that instead, since the title is meant to add to the image instead of replacing it.
Posted by Mark IJbema on May 13th, 2005.
I would prefer what Richard says. I use this method for myself mostly.
Posted by Arif Ender on May 13th, 2005.
My understanding is that the alt text is an alternative rendering method for text only browsers, screen readers for the blind and so on. While I rarely do this myself (so you can write this entire comment off as hypocrisy if you like, but at least I’ve never embedded the “skip intro” link inside the flash animation people wanted to skip…), in my mind the ideal alt tag is “[Photo of Sam and I at the Beckham’s party]”
Substitute “photo” for “image“, “diagram” or “visual representation” as required. For the page to make sense without the picture it has to indicate that there was a picture there to begin with – if it’s a copy of the caption then all you have is the caption text twice – nonsense. If I was browsing with links and saw “Photo of…” enclosed in some sort of brackets then I’d assume there was a picture there. It’s impossible to make an alt tag look like part of the text without the text lacking when the image is present.
Posted by fuzzix on May 14th, 2005.