how-to-insert-alt-tag-in-images

One of the simplest ways to make your Web site more accessible is to use an alt attribute in your image tags. It's amazing to me how many people forget to use this simple attribute. In fact, now, if you want to write valid XHTML, the alt attribute is required for the img tag. And yet people still don't do it.

What is the ALT Attribute?

The alt attribute is an attribute of the img tag and is meant to be an alternative for non-visual browsers when they come across images. This means, that the text is meant to be used when the image is not visible on the page. Instead, what is displayed (or read) is the alternative text.

Many browsers also display the alt text when the customer rests their mouse on the image. This means that the text should be clear and easy to read and not create a huge popup nightmare for any reader pausing their mouse on your page.

Adding alt text is simple, simply use the alt attribute on your image:

<img src="image.gif" alt="This is my dog, Fido" />

Tips for Writing Alt Tags

1. Be brief
   Some browsers will actually break if the alt text is too long. And while it might seem nice to describe what is exactly in the image, that's not the purpose of the alt tag. Instead, it should be filled with exactly the words needed to put the image in context and no more.
2. Be clear
   Don't be so brief that the context is confused. Remember, some people will ONLY see the text in your alt tags, so if it's too brief they might not understand what you're trying to show them. For example:
   a tree - good
   a sycamore tree - better
   a 10-foot tall sycamore tree with mostly brown leaves and possibly something wrong with its bark - too much
3. Be contextual
   Don't describe the image if it's meant to be viewed in context. For example:
   If you've got an image of the company logo, you should write "Company Name" and not "Company Name Logo"
4. Don't display your site's inner workings
   If you're putting in spacer images, just use a space for your alt text. If you write "spacer.gif" it just calls attention to the site, rather than providing useful information. And technically, if you're trying to write valid XHTML, you should use CSS rather than spacer images, so you might as well leave the alt text off of those images.
5. Be search engine conscious
   If you have good, concise, clear alt text, that can actually help your search engine rankings, as the images on your page promote and enhance your keywords.
6. Don't use it only for search engine optimization
   Many sites think that if they use alt text as an SEO tool, they can "fool" the search engines into optimizing their site for a keyword they don't have there. However, this can backfire if the search engine decides you are trying to fake your results and removes you from the results completely.