Writing good "alt" content? [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
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)

Answer 1

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:
The alt tags would be as follows:
<ul>
<li><img src="red.jpeg" alt="Red"></li>
<li><img src="green.jpeg" alt="Green"></li>
<li><img src="blue.jpeg" alt="Blue"></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:
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.
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>Description of the painting.</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.
Further information about the painting.</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:
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>

Answer 2

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

Answer 3

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.

Answer 4

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?