Image Alt Attribute

Web-Dev

There is much confusion about the proper use of the alt attribute. The first confusion is reference to the alt attribute as the alt tag. This is more or less okay, but….. if you do a google search on alt attribute you will get results that are generated by more knowledgeable writers. So, while it is okay to use alt tag it would be better to at least know the proper term. If for no other reason when you see alt attribute used in an article you will know that they are talking about your good old friend alt tag. :)

Before we talk about the more philosophical aspects of the alt attribute let’s get right to the meat of the matter.

Proper-ish Use of Alt Attribute

  1. You must use an alt attribute on images.
  2. It may not be used for any element other than img, area, and input. For our purposes just concern yourself with the img element. And know you may not use alt on tables, href links, or anything else.
  3. Use the alt attribute to provide text for visitors who can’t see the images in your document.
  4. For decorative/style images, use alt="" instead of irrelevant text such as “red line”, “spacer”, etc.
  5. If the image contains text then use alt=”that text”. If the image is company logo such as Galaxy Website Design  then use alt=”Galaxy Website Design”.
  6. Alt attribute is not for tool tips. It does not (or at least should not) work that way.
  7. Remember the alt attribute is a substitute for those who cannot see the image for one reason or another.

When & Why is Alt Attribute Displayed

The alt attribute is displayed when the image is not. The alt attribute is literally the alternative to the image.

Reasons for seeing alt text:

  • Viewer is visually handicapped and is using a screen reader.
  • Viewer has image download turned off by choice.
  • Viewer is using slow connection.

First and foremost consider that the alt text is being used by screen readers. So be compassionate. The alt attribute is NOT the place to do keyword stuffing. Please have mercy on those using screen reader software.

Some people look at webpages with image download turned off by choice. Therefore they will see the alt text. They may have turned of image download for any one of many valid (and/or invalid) reasons. The choice was theirs. The alt text should make sense for these folks. You can turn off image download in your browser to see what this looks like. If you are a stuffer, hopefully you will be suitably shamed into better alt attribute behavior after looking at your pages in this fashion.

For those will slow internet connections, they will see the alt text temporarily while the image is being downloaded. When my broadband is acting more like narrowband dial-up, I will often see the alt text on the page while waiting for the image to download.

Alt Attribute Use Summary

  1. Alt-text is required for all images.
  2. If the image is active (link, button, area) the text alternative is the function of the image;
  3. If the image is not active but conveys information, the text alternative conveys the same information;
  4. If the image is redundant or conveys no information use alt=”” for the text alternative.
  5. If the image is text then the alt-text should (usually) be the same as the text in the image.
  6. Make it as short as possible, but as long as necessary

Some Reference Links