basic understanding of HTML related to images

Overview

Hopefully you are at least somewhat familiar with alt text. This is the text that you see if your image can not be displayed. The text that can be read for a person that is vision impaired. The text that search engines “see” since they can not describe your image, you have to do it for them. To be technically correct, this is the alt attribute of the “img” tag.

Guidelines for alt text:

1. Ensure that the text alternatives communicate the purpose of the graphic accurately and succinctly.
2. Provide empty alt text for graphics which do not convey content.
3. Provide alt text for both the main image and the hot spots of image maps.
4. Do not repeat the alt text of an image in the adjacent text.
5. Do not put important images in the background.

The Importance of Alternative Text

One of the biggest accessibility problems on the Web today is the lack of alternative text for graphics and images. Individuals who are blind often use screen readers or refreshable Braille devices that read the text on the page to them. When these technologies come across images without alt text, they are unable to communicate the meaning of the image.

When a screen reader comes across an image with no alt attribute, there are a couple of things that could happen:

1. It could simply skip the image as if it were not even on the page.
2. It could find some text that is associated with the image such as the file name and read that instead.
3. The exact behavior of the screen reader varies between brands and the Web page itself. In either case the end result is undesirable. The user either misses the image content completely or gets some text that is probably meaningless.

How Images Are Used

Images on Web sites are used in four ways:

1. a picture is worth a thousand words - it just helps you describe beyond words
2. an aid to visualize important concepts
3. to provide visual enhancements which offer no real content - just pretty
4. to link to other areas of the site (instead of anchor text)

The most appropriate alt text for an image depends on the way in which the image is used. In fact, the same image could be used for different reasons under different circumstances, and each instance of this image would have different alternative text. Keep the following rule in mind:

Communicating the Purpose of the Graphic

The most appropriate alt text communicates the purpose of the graphic, not its appearance, and the most important information to convey in alternative text is if the user can click on the image to go to another area of the site.

If the image or graphic contains information that is relevant to the content of the site, then the alt attribute should also provide that content, in a way that is consistent with the purpose of the image. Remember that the purpose of the image is not necessarily the same as the appearance of the image.