Alt Text, Image Captions and Accessibility | February 9, 2005

Anne said on February 9, 2005 9:28 AM

Do you have a real example? Anyway, if the image is important to the visitor you should always include the ALT attribute with a description.

Rob McMichael said on February 9, 2005 9:38 AM

I would have to say, every case on its merit as the key to accessibility is really thinking about it. However from a general point of view I would have to say adding something to the alt, text (even if it is just a brief description or description below) is better than nothing at all.

Benvolio said on February 9, 2005 9:38 AM

Image captions are (semantically speaking) a non-event. To use <caption> you have to use <table> and we all know where that leads with image galleries.

Would an alt attribute always contain the same info as <caption> anyway? Probably.

It should be noted that the alt attribute is also for people who have images turned off.

paul haine said on February 9, 2005 9:39 AM

The question of why a screenreader user would be browsing a large photo gallery aside, I think that a blank alt attribute in this case makes perfect sense. A sighted user will be looking at the photo and reading the associated text, and a screenreader user will just be reading the text. As the alt attribute is there to be read out when images aren’t present, there’s no point putting in that information twice.

Does that make sense?

Chris Vincent said on February 9, 2005 9:40 AM

I don’t think the alt text and caption should necessarily do the same thing.

A caption doesn’t serve as a substitute for an image; visual readers don’t need one, since they can see the image. Instead, a caption gives readers additional information that simply looking at the picture could not give.

Alt text, on the other hand, does serve to replace the image.

When I’m writing alt text and captions, that’s what I try and keep in mind. The alt text flatly and briefly describes what is in the image, while the caption gives additional information.

Of course, it’s also a matter of style and the type of content being displayed.

Anne said on February 9, 2005 9:43 AM

paul, the ALT attribute is not only there for when images are not present. It is there to provide people who can not see images with information. (Google, for example.)

Trovster said on February 9, 2005 9:43 AM

What exactly is an image caption… an example would be good. If you’re talking about the longdesc which is a link to an external explaination of the image then alt should still be included, without a doubt. This is because the user has a choice whether to read the long description or not. So to get the idea of the image, they could just check the alt text. If a user is using a visual browser but has images turned off, they’d just get a blank area if not ALT text is provided & some don’t support the longdesc link.

Then again, I’m not 100% what you mean about the image “caption” part.

Jurgen said on February 9, 2005 9:46 AM

I think it’s important to make clear that the caption is about a displayed image. So either the caption or the image alt tag should refer to one another.

But isn’t it al lot easier to use your media type to display the image and caption for non screenreader users and to hide te caption for screenreader users?

Mr Peer said on February 9, 2005 9:58 AM

I’m not sure that screenreader users have any interest in browsing a large photo gallery…

Mark said on February 9, 2005 10:30 AM

Chris Vincent and Mr Peer hit this head on for me, I don’t see any need for a caption to ever duplicate image ‘alt’ text and I’m struggling to imagine a scenario where anyone with a screen-reader has an interest in browsing a ‘large photo gallery’.

The ideal situation for me would be for image text to be stored within the tag where it belongs, breaking it back into the page with CSS or possibly JS if you need IE compatibility.

Ben said on February 9, 2005 10:40 AM

As a rule of thumb, I always use the ALT text to visually describe the image, (such as “Icon: Left arrow”) whereas I would use the TITLE attibute to provide more meaning to the image, if needed, (“My family around the dead fox: Brian, Pam and little Tim”).

I mainly do this because of the way browsers treat the different text - ALT appears when the image is missing, which indicates that it should describe it in its place, whereas TITLE is visible on mouseover. This indicates to me the user is seeking more information by holding their mouse over the image.

Liz Calkins said on February 9, 2005 12:04 PM

Heh. I’m really, really glad someone asked this sort of thing… it’s been bugging me!

I’ve been working on redesigning all my websites to have cleaner and more semantic code, and I’ve been wondering how to deal with this issue. Case in point:

http://sc.alienharmony.com/season1/otrtfo/page_01.htm

My captions don’t always describe the picture exactly, but it still is a little awkward to figure out what to do.

Lea de Groot said on February 9, 2005 12:29 PM

Each case should stand on its merits, but I would default to including alt text.
My reasoning is basically that there isn’t anyway to link the caption to the photo - I’m thinking of how a label is linked to an input field through the ‘for’ attribute.
Hmmm… I seem to recall a blog post some time ago that discussed that issue - it used a person with a dog against a water background shot as the example… darn, google isn’t helping me find it right now, but IIRC the conclusion was that the correct content for a caption was different to the correct content for the alt attr.

Tim said on February 9, 2005 12:43 PM

Surprisingly only Ben mentioned the title attribute. I treat alt (alternate text, remember) as a placeholder for the image; i.e. alt=”book cover”. I then use the title attribute to describe the image; i.e. title=”The Stars My Destination by Alfred Bester”.

I would use caption the same way I use title. So I would say no to your original question — you should still include an alt attribute even when captioning.

However, now I wonder if you need to use title if you use a caption?

Ben said on February 9, 2005 1:58 PM

I’ve always used TITLE over CAPTION, unless I specifically refer to the image in the accompanying text, (e.g. “In figure 1.2…”), in which case CAPTION helps a user identify the specified image without mouse-over “scanning”. If I don’t refer to the image, I just use TITLE.

jake said on February 9, 2005 2:36 PM

I’d have to agree with the last couple comments. The caption is more in line with the title attribute than the alt attribute. I normally use label to build captions. Seems to work well.

I think of alt text more being a literal interpretation, where a caption or title can easily be something like, “Hey Jim, get that out of your nose, you don’t know where it’s been!” Not what you’d see in an alt attribute. If your alts have the same content as your captions, then I’d probably leave out the captions.

Andreas said on February 9, 2005 3:08 PM

Depending on the contents of the ALT-attribute, and if you think you can use CSS3 in the implementation, you could use :after and content: attr(alt); to reuse and style the ALT-attribute after the image.

Like I said, this would require a CSS3 compliant browser — unless it could be done with JavaScript (unsure if IE7 covers this, and if one would be willing to use that work-around for a caption).

This way, you don’t write the caption out twice, nor is it separated from the image, even if the file is missing.

Kim Siever said on February 9, 2005 3:51 PM

IMO, so long as the caption describes what is in the image, I see no reason to duplicate it in the alt attribute.

Rob McMichael said on February 9, 2005 4:28 PM

Andy, do you mean a caption tag or just a caption under the photo in text?

If you are talking about a caption tag then leaving the alt tag empty or with a * in is IMO the best way to go.

As I said before though if it is a caption bellow the image, I feel the alt text should still have something in it, such as “A Dog”.

Dalibor said on February 9, 2005 9:00 PM

It really depends what type of website or content you’re talking about. Galleries I would definitely place the alternative text along with a caption maybe, but things such as articles that have side images might only need the caption, leaving the ALT text out altogether.

But generally speaking I always place the alternative text (doesn’t matter if there is a caption or not), because after all the alternative text doesn’t hurt anyone, but leaving it out might.

Daniel Bulli said on February 9, 2005 11:05 PM

My ASSumption is that you mean a caption under image.

I have gone back and forth about this. I think an alt tag is always worthwhile to have, and maybe the caption could be a little more descriptice.

The issue i see is how does the users know it’s a caption. It’s easy to see relationship visually, but for a screen reader maybe not. Maybe it’s ok to leave out alt tag, if caption reads ‘Caption : …..’ so atleast they know what it is.

my 2c…

Jules said on February 9, 2005 11:59 PM

Funny: I was thinking about this the other day. I haven’t come to a decision yet but I am leaning towards using alt, title and JS. I would place a very basic description of the image in the alt attribute rather than leaving it blank: that would assist image searching through Google or other search engine. I would add caption-like text to the title attribute. Then I would use JS to extract the title text from the attribute and dynamically place the title text between <p>...<p> tags after the <img> tag (other manipulations may be required but the basis would be this).

Actually, not all of this is true: I don’t know JS well enough to do this myself but I know that this is possible.

Kris said on February 10, 2005 8:06 AM

Sometimes it can be unclear that the caption is talking about an image following it, so then I add a simple alt text, like [Image of a bird].

When the image is part of a link and there is nothing else than the image making up the link, then an alt text is required.

By the way, the e-mail field in your comment form is required for me to fill out, but it does not say so beforehand, like the name field does.

pixeldiva said on February 10, 2005 9:22 AM

Actually, you don’t need to add “Image of” to your alt text, because any screen reader will let the user know that it’s an image.

Same with links.

There are very few occasions where having a title/caption/description of the image (visually placed) next to the image makes it acceptable to make the alt text for the image null or empty. Thumbnail galleries being the only one I can think of off the top of my head.

Using the photo gallery example above. Say you have a page of thumbnails with the photo title as a link to the larger version underneath the thumbnail.

You could extend the link to include the image and then give the image null alt text. Like so:

[a href=”foo.html”][img src=”foo-thumb.jpg” height=”100” width=”100” alt=”” /]Foo[/a]

Anyone using a screen reader would then hear something like:

Link, image, Foo.

Anyone using a text browser or browsing with images off would see:

Foo

as opposed to:

FooFoo

Anyone viewing “normally” with images on, would be able to click on either the image or the link and get to the larger version.

… and to make sure the user knows the destination of the link, I’d add a line of text to the top of the page letting the user know that all images link to larger versions.

Alt text is intended to provide an alternative if images cannot be displayed.

Title text is intended to provide additional information on mouseover, however, not all users will be able to access that information. For example, if you can’t mouseover an image, there’s no way to get the information to display.

There is no cut and dried rule. It’s important to look at the context and what the benefits/drawbacks are from the user’s perspective, however they may be accessing your content - whether that’s using a screenreader, screen magnification, text browser, mobile device or whatever.

ryan said on February 10, 2005 4:14 PM

I thought the alt tag was for alternative description for the image. If you had a caption describing the picture an alt tag would be useful to add more information. Here is a great article describing these symantics…http://www.molly.com/2004/12/18/web-design-world-cool-down/

Dooch said on February 15, 2005 11:03 AM

I would say that you require a ‘title’ in addition to a caption. Is the caption to the left, right, below, above? In a page with lots of content a user with a screenreader may lose track of which caption refers to what.
If you have a list of images with a caption above each image, if the user turns to talk to someone and then comes back to the page, if they can’t remember, how can they tell if the caption refers to the image above or the image below?

Miles said on February 15, 2005 2:41 PM

Have to agree with the comments from Ben above, but to a little more detail.
On images I use the ALT to describe the actual image tself, a good rule of thumb is as if your describing the image over the phoene. I then use the TITLE to describe the relevence of the image, such as “click here for this”, “when I fell on my bum in the park and got photographed” etc etc. Seems to work well with browsers that show title on mouseover but not alt on rollover.

Francois Jordaan said on February 16, 2005 7:05 PM

Hi Andy,
I posed this question (making the same assumption as you do) to the WAI list last July. Read the ensuing thread at
http://tinyurl.com/4xzep
“Is ALT text necessary if there’s an identical caption adjacent?”

Matt Keogh said on July 11, 2005 10:52 AM

Does anyone know of a way to associate text to an image? Would a screen reader know that the text that is after the image is a description of what the image is?

I thought that using a blank alt attribute causes screen readers to ignore the image so if you have a bit of text after an image that is ignored by a screen reader then I would have thought that might be more confusing.

Tala sabi-aish said on December 1, 2005 11:33 AM

I really think you should add the alt tags - sometimes images do not show - by having the tag, it gives you a chance to know what is that image about.

Spanky said on December 21, 2005 11:10 PM

I worked for a major book seller…
Their Web Designers forgot to use ALT
on their images. Blind people had a major problem using thier website to buy books and media for their “seeing” family and friends. Why? Because their browsers couldn’t find descriptions of the images and
they got lost on the website.

This became a major problem for them, as they also sold braile books.

They fixed the problem, in time, but they had major headaches from the many blind people who use the net.

Just thought I’d throw that in there.

Spanky