Image alt attribute best practices

Question

What exactly is the intended use of the alt attribute on <img> tags?

Should it describe the image, or should it provide meaningful replacement text for screen-readers (and people who have images turned off)?

For example, if I have a short biography of a person on my website, and include a small photo of them, is it really meaningful to visually impaired users to have "Photo of John Smith" read out to them?

Answer 1

Its provides "alternate" text if the image could not be loaded for some reason. In your example I would say yes it would be appropriate.

Answer 2

It should be anything that helps the user if the image is not displayed.

Btw the "feature" of when you hover over an image in IE and the tooltip shows the ALT is not the correct behavior of ALT. Title is supposed to be used for this.

Answer 3

first hit on google for this [img alt accessibility] gives Consider what the page looks like or sounds like when images are not shown. Then, write for each image an alt text that best works as a replacement (Guidelines on alt texts in img elements)

Answer 4

Succinctly describe the image, as if you were talking to a blind person. Pretty simple.

I'm sure this attributes value is used by Google to index Image searches.

Answer 5

From w3.org:

While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:

• Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
• Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.

Answer 6

I think the idea is to use the alt text to communicate the same information as was intended with the image. This depends on what the image is.

Navigational elements are perhaps better described by their function ("next page", "back") than their appearance ("right arrow").

The photo of John Smith might be replaced with a description of John Smith, or a description of the event taking place, etc.

Answer 7

The HTML 5 spec has a huge section on this.

Basically, the alt attribute should be what would be there as text if you hadn't used an image at all. If your image is purely decorative, you can use alt="". A description goes in the title attribute.

Answer 8

The "alt" attribute is an alternative (textual) representation of the semantics of the image. This is not just used for images that can't load: it's also used for screen-readers or text-only browsers.

In your particular case, including the alt-text kind of depends on whether you think it's important to note that the page contains a picture of the person or not. If it's a purely visual item, you may not want any alt-text. If it's also used as a link of some sort, you probably do want some alt-text so that a person using a screen-reader has some clue about what following the link might do.

Answer 9

if I have a short biography of a person on my website, and include a small photo of them, is it really meaningful to visually impaired users to have "Photo of John Smith" read out to them?

If you don't have that alt text, what do you think they'll assume the image is? "Photo of John Smith and his wife"? "Photo of John Smith accepting his Oscar"? "Photo of John Smith assassinating JFK"? "Photo of John Smith lying dead on his patio after being murdered by his pet elephant"?

If it's a photo of John Smith, yes, say so. If it's something else, say so.