Use The Alt Attribute With Image Tags

The alt attribute of an image tells a web browser what text to use if the image cannot be shown. Most browsers also show the alt attribute of the image when you mouse over the image, which is useful if the image does not explain itself well. The actual tag would look something similar to below.

<img src="/images//basic_wai/submit_image.gif" alt="submit">
?>

The image above says "Submit" and could be used with a web form. The reason the alt tag only says "submit" instead of something fancy like "submit this form" is because the standard way of using the alt attribute is to just use the word or words on the graphic if the graphic contains text.

If the graphic were an emoticon then the alt might be "smile" or "frown" depending on what the emoticon represented. If the graphic were a picture of a family gathering then you would want to describe what the picture is of. We might say "The Smith family gathering of 2003".

It is possible you want to give more information than that but if you already give the other information in the actual web page below the image in a description then there is no need to give it in the alt text area because that would lead to having the same information on the page twice. A person using a page reader, for example, would then have to listen to the information twice and that would not be very useful.

Another important thing to think about is the title attribute of the image tag and of the href tag. If you have a situation below, where an image is actually used as a link, then just having the alt text might not be useful. The reason for this is that a link usually explains were a person is going. A quick example might be go to the Grinding Gears homepage.

If we use the submit button from above and link it then it might be confusing to someone if it is not used as a submit. Say we use it as a "click here to submit your information". We would want the person to know what that is so we can inform them by putting the title in the image like the code below shows.


<a href="#"><img src="/images/basic_wai/submit_image.gif" alt="submit"></a>

?>

That code above will create the following

This gives the user the alt text, which shows if the image does not load or is read by a page reader. So in this case no matter what the user will get the "submit". The title tells the user what is going to happen if they click on the link. It is important that the user know what the image is and also they know what following the link will do. The title attribute also works with href's so if you have a few extra minutes in your day you should experiment with the title tag as it is useful to tell users, in a few extra words, where the link will actually take them. If a title attribute is used it overrides the alt attribute in most newer browsers.

One last image that is important to talk about is a spacer image. If you use tables in your design chances are you use spacer images which are usually just a clear image that is only a pixel or two wide that is just used to take up space so that things look correct on the screen. If you use spacer images you should set your alt to be " " that is a quote with a space in the middle and then a close quote. You do not want to just do two quotes next to each other because that is an empty string which some page readers or browsers might think as a mistake on the developers part. If you are using a spacer image you want to make sure to use a single space string so that browsers and page readers know that you meant to do the empty string.