The ALT Attribute

ALTernative text is used by folks with text-only browsers, like Lynx; people who surf with a graphical browser, but with images off to speed up surfing; blind and visually impaired visitors, who use speech readers or Braillers to surf; and robots used by search engines to index Web pages.

There are basically three kinds of ALTernative text:

1. Descriptive text
2. "Replacement" text
3. Nothing (ALT="")

Descriptive Text

Descriptive Text is used for complex graphics, such as photos or paintings (used with permission, of course). An example of this would be the balloon photo on the previous page. It would be nearly impossible, and most likely undesirable, to try to describe a painting. But the title and author would give some information to those who can't or don't want to see the graphic.

Also, although text browsers don't show graphics, that doesn't mean they can't download graphics. These downloaded graphics are then viewed in a graphics application. If you give good, descriptive ALTernative text, a Lynx user could decide whether she might want to download and view that graphic.

"Replacement" Text

Replacement text attempts to replace the function a graphic may serve. For example, let's look at the HTML for the orange bar above:
<IMG SRC="or_bar.gif" ALT="--------">
Without graphics, there would still be something to indicate that there is a break there, namely "--------".

You wouldn't want to describe the graphic; that would be unintentionally humorous Here's how it would look in Lynx:

"Replacement" Text

Orange Bar

Replacement text attempts to replace the function...

On the other hand, a graphic that contains text must have ALTernative text which contains the exact same text, so that people with and without graphics get the same information. No one should be short-changed, just because they aren't using a browser with which you are familiar.

Nothing (ALT="")

You can also leave ALT completely empty. Readers without graphics will see nothing. Basically what you are saying is, "I like this graphic, but only for decorative purposes, and the reader will not lose any information by not seeing it." Sometimes this is appropriate.

Here are three examples of a line of HTML which uses two graphics. Different values for ALT are used, and after that is what a Lynx user sees (or what a speech browsers says, or what a Brailler prints, or what a search engine indexes).

Good Example #1

The HTML:

<IMG SRC="blueball.gif" ALT="*"> This sentence contains an <IMG SRC="image.gif" ALT="image.">

What a reader with graphics sees:

This sentence contains an

What a Lynx user sees:

* This sentence contains an image.

Bad Example

The HTML:

<IMG SRC="blueball.gif"> This sentence contains an <IMG SRC="image.gif">

What a reader with graphics sees:

This sentence contains an

What a Lynx user sees:

[INLINE] This sentence contains an [INLINE]

This example shows why we require ALT text on all graphics!

Good Example #2

The HTML:

<IMG SRC="blueball.gif" ALT=""> This sentence contains an <IMG SRC="image.gif" ALT="image.">

What a reader with graphics sees:

This sentence contains an

What a Lynx user sees:

This sentence contains an image.

This shows how using ALT="" takes away the blue graphic altogether, but no information is lost.

Previous: Adding Images
Next: GIFs and JPGs