What is the purpose of the alt attribute for an image?

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?

Jeffreys

Answer 1

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.

Emu

true, you shouldn't use the alt attribute on decorative images, but what value is there in knowing that there's a photo of John Smith for a blind person? Unless you're going to go in-depth and describe his features, it seems a bit pointless. – Jeffreys

They've covered that too - if you really can't provide any useful alt text, or if there's no point because the page text is good enough, omit the attribute entirely. – Emu

Do no omit the attribute entirely. Leave it as alt="" or else some screen readers will read it as "graphic <filename>" – Gleich

@Gleich Actually, some screen readers still read the filename with when an alt attribute is the empty string; better to use one space, i.e. alt=" ". – Ravelment

The WHATWG spec is actually a surprisingly interesting read - what surprised me the most was the number of times it's actually recommended to leave the alt attribute present, but empty! – Ortrud

Answer 2

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.

Lafontaine

Answer 3

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.

Afterburning

Answer 4

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.

Ohmmeter

Answer 5

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.

Agincourt

Answer 6

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)

Popover

Answer 7

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.

Skier

IE only shows the ALT text if the TITLE text is not available. And that is just one possible use of TITLE. – Afterburning

Answer 8

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.

Cucurbit

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.

Dialogize

man, that John Smith guy has some great adventures. The alternative I was alluding to was using alt="" for pictures which don't include Oscars or homicidal pachyderms. – Jeffreys

Answer 10

Alt attribute is used with img tag.

Alt means Alternate

It is used for short description of image.

It is displayed on screen in case browser is unable to load image

Click to Know more

Hydrostat

Please explain how the link would help in resolving the issue. – Adynamia

Please explain your answer too. – Lenient