2

What is it the best practice with regards the alt attribute of images?

For example, say I have an image with a caption that says "We look after our staff" and the accompanying image is a picture of a man looking out of a van windows towards the camera, for the alt content should I have something like:

"We look after our staff" (A copy of the image caption)

OR

"A picture of a man looking out of a van windows towards the camera" (A description of the image)

4 Answers 4

4

Taken from the w3 spec, reworded;

There is no "wrong" or "right" way of writing alt tags, as it is relative to the context. For example, take the following scenario; on your site, the end user is asked to pick his favourite colour:

enter image description here

The alt tags would be as follows:

<ul>
<li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
<li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
<li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
</ul>

A second scenario is if you had a logo which in turn links through to the website, the alt tag should be a description of the link:

enter image description here

A well written alt tag would be:

<a href="http://w3.org">
<img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
</a>

More applicable for YOUR scenario would be the following examples.

Here is an example of an image closely related to the subject matter of the page content but not directly discussed. An image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows an example. The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. There is a short description of the content of the image in the alt attribute and a link below the image to a longer description located at the bottom of the document. At the end of the longer description there is also a link to further information about the painting.

enter image description here

Which should have the following code for the alt text

<header><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2></header>

<img src="shalott.jpeg" alt="Painting of a  young woman with long hair, sitting in a wooden boat. ">
<p><a href="#des">Description of the painting</a>.</p>

<!-- Full Recitation of Alfred, Lord Tennyson's Poem.  -->

...
...
...
<p id="des">The woman in the painting is wearing a flowing white dress. A large piece of intricately 
patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression 
is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out. 
<a href="http://bit.ly/5HJvVZ">Further information about the painting</a>.</p>

However.... sometimes an alt tag can be left out all together. For example, if you had the above image with a contextual description relative to the image on the page directly below:

enter image description here

Join us for our medieval theme nights every Friday at Boaters Bar, on the riverside, Kingston upon Thames.

For the above example, either of the following solutions would be conforming:

<p><img src="shalott.jpeg" alt=""></p>
<p>Join us for our medieval theme nights every Friday at 
Boaters Bar,on the riverside, Kingston upon Thames.</p>

Or

<p><img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat."></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar,
 on the riverside, Kingston upon  Thames.</p>
2
  • 1
    Short answer... the last example in my list will apply to yours
    – rickyduck
    Jul 5, 2012 at 8:54
  • 1
    Awesome, just the kind of explanation I was looking for :)
    – Sean
    Jul 5, 2012 at 8:58
3

Extract from w3.org

When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.

Example 1

An image on a Website provides a link to a free newsletter. The image contains the text "Free newsletter. Get free recipes, news, and more. Learn more." The alt text matches the text in the image.

Example 2

An image on a Web site depicts the floor plan of a building. The image is an image map with each room an interactive map area. The alt text is "The building's floor plan. Select a room for more information about the purpose or content of the room." The instruction to "select a room" indicates that the image is interactive.

http://www.w3.org/TR/WCAG20-TECHS/H37

0

Warning: this answer is rather subjective.

I use this attribute especially at images having a special function. For example a image of a disk on which the user can click for saving something. Then the value of alt would be "save".

But I don't think you should give a description of every picture. Just say "gallery image" or something like this.

2
  • It makes sense to use it to describe images that have functions, hadn't thought of that situation!
    – Sean
    Jul 5, 2012 at 8:50
  • 1
    Alt attributes are required for all images, not ones with "special usuage." NEVER use stock alt's like kuh suggested. If the image isn't important give it a null alt (alt=""). This tells a screen reader to ignore it, and skip over it. Stock alts are extremely annoying, imagine being told to do a 2 page survey and surprise it is really 10pages.
    – Ryan B
    Jul 5, 2012 at 12:36
0

Remember, the alt is for the text replacement for the imagine.

Many cases, I leave have alt = "" because there is no text that would replace that imagine.

Other times, just a single character is best:

<img src="fancy_bullet_point.gif" alt="*">

Just remember the basic rule of thumb: If you did not have the image, what would you put there instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.