There seems to be a growing debate about the correct use of alt tags recently.

• How much text should be allowed
• What should be included in alt tags
• Describe the graphic in alt tag
• List the copyright in the alt tag
• List the width and height of image in alt tag

It would seem that everyone now wants to make up their own rules concerning the use of alt tags. However, the reality is that alt tags are for those who cannot see the images, blind, browsers with images turned off, and text only viewers.

What really should the alt tag do?

Alt stands for alternative text, and here are some guidelines on how to use alt tags correctly.

• Alt tags should be a text equivalent of the image, Keep it short, as it is not to be a description of the image. Descriptions are written using the longdesc or (d) links. Long descriptions and d links are links to another page where the explanation is located.
• If graphic is used as a link then in the alt tag state that example:
• 
• Use text that, if read instead of having the graphic, would make sense.

Examples:
• If the above statement was read it would go like this” To get your car repaired go to Jim's Car Repair ' link to Jim's car repair'”
• If description was arrow graphic 10 x 13 it would read like this: “ To get your car repaired go to Jim's Car Repair 'arrow graphic 10 x 13'”

If you were reading this, or having a screen reader read this page for you, which one would sound better?

• Bobby accessibility tester says you need to have text in all alt tags. However, the opinion of many blind people and accessibility consultants is Bunk. If you would leave the alt tag blank like this alt=”” then screen readers would skip over them, and text viewers would look like this “”.
• This would work well for page dividers
• List objects
• Directional arrows
• Page fillers and Decorations for the sighted visitors

Alt text questions

The requirement for alternative text also applies to images that carry no information like "spacer.gif" (assuming the role of spacer.gif is just to fill in some space). Write alt="" for the alternative text to say that an image contains no relevant information. <IMG src="images/spacer.gif" alt="">

This tells an assistive technology, "don't bother me with any information about this image," and the screen reader or text browser will completely ignore the image. If you do not place alt="" for unimportant images, your site cannot pass accessibility checks, and blind users may have to listen to strings inserted by the assistive technology, such as: IMAGE cache.bushwhack.com/@v=srRjq-h@/images/spacer.gif

Imagine how awful a lot of those type announcements would sound. Why clutter up your page with meaningless text when the graphic is not meaningful?

If we are telling people that, you can make good-looking pages by building it accessible then why make them take out all the little extra things that give them a sense of building a site, which is a part of them. Many times, filler graphics will add flavor to a web site and good graphics will enhance a web site too especially in a commercial sites that are selling items. They like to have a graphic of the product they are selling. Moreover, people with screen reader and text viewers do not want a lot of picture of, another picture of because they do not see the picture to begin with so why keep throwing this up to them.

To get a good idea of how you page would look with out graphics take a look at it with a screen reader like the one at Delorie.com at: http://www.delorie.com/web/lynxview.html just type in your page address and it will convert your page to text. You can also see how a screen reader would read your page. Entities are also read by screen readers as — is dash, and # is pound sign, and / is forward slash and so on. Remember screen readers are mechanical and reads exactly what it sees.

top of page   -   Return to Tips