Tuesday, December 1, 2009

What exactly is an Alt Attribute?

An ALT attribute should not be used as a description or a label for an image, though many people use it in that fashion. Though it might seem natural to assume that alternate text is a label or a description, it is not!

The words used within an image’s alt attribute should be its text equivalent and convey the same information or serve the same purpose that the image would.

The goal is to provide the same functional information that a visual user would see. The alt attribute text should function as a "stand in" in the event that the image itself is not available. Ask yourself this question: If you were to replace the image with the text, would most users receive the same basic information, and would it generate the same response?"

Some examples:
If a search button is a magnifying glass or binoculars its alt text should be ’search’ or ’find’ not ’magnifying glass’ or ’binoculars’.

If an image is meant to convey the literal contents of the image, then a description is appropriate.

If it is meant to convey data, then that data is what is appropriate.

If it is meant to convey the use of a function, then the function itself is what should be used.

Some Alt Attribute Guidelines:
Always add alt attributes to images. Alt is mandatory for accessibility and for valid XHTML.
For images that play only a decorative role in the page, use an empty alt (i.e. alt="") or a CSS background image so that reading browsers do not bother users by uttering things like "spacer image".

Remember that it is the function of the image we are trying to convey. For instance; any button images should not include the word "button" in the alt text. They should emphasize the action performed by the button.

Alt text should be determined by context. The same image in a different context may need drastically different alt text.

Try to flow alt text with the rest of the text because that is how it will be read with adaptive technologies like screen readers. Someone listening to your page should hardly be aware that a graphic image is there.