NERD! Homepage

How to use the alt attribute (or alt text)

In most cases the alt attribute should be empty.

<img src="image.png" alt="">

There are two exceptions.

  1. The image is a link
  2. Without the image the content would be incomplete

The first exception is easy. If an image is a link there must be an alt text and that text should describe the link, not the image (just like good link text).

The second one is easy too. If the content on the page can’t be understood without the image the image must have an alt text that describes what’s on this image. The alt-text should be a logical addition to the rest of the content. If you replace the image with the alt text it should still make sense. If it doesn’t rewrite it or remove it.

Please see the WHATWG for a more detailed and complete explanation of the art of good alt text

Mathias Bynens | | #

Well said! +2 internets to you, kind Sir.

Vasilis | | #

Well thank you very much, that’s too kind!

Paul | | #

Shouldn’t you begin with the question ‘Is this picture part of my content or part of my layout?’
If it is content, the ALT attribute should be filled properly. If the image only serves layout purposes, try substituting it with CSS and semantically relevant HTML. If the image is part of a link, I think you should use the title attribute of the tag, not inserting ALT text regarding the link into the image.

Vasilis | | #

If you don’t provide an alt text to an image in a link you can’t follow that link when the image isn’t there (for whatever reason, but also screenreaders), the title attribute is switched off by default in most screenreaders for accessibility purposes, too much bloat. So the title attribute only shows a tooltip in most browsers which can be quite annoying.
Now, if I write an article about my cat and I show a picture of this cat. Is it relevant to add the text “a picture of my cat” to that image? It doesn’t make any sense but it’s not part of the layout, it’s part of the content. It enhances the content for those who can see it but we don’t need it. The phrase ‘A picture of my cat’ somewhere in the article would probably be confusing to most readers.
Tip: read the article in Lynx and see if the images still make sense.

Paul | | #

Ah, I was convinced screen readers took the title attribute into account for <a> tags. I think that they should, but that is a different discussion. I made adding alt tags for images a habit, as to be sure to pass any automated usability tests. The User Adopts To The System, you see…

Marcel Korpel | | #

You can also use Fangs to see what a screen reader would read.

Delicious (Dutch)