alt attribute

For the use of alt attributes in Wikipedia, see Wikipedia:Alternative text for images.

"Alt Text" redirects here. For the Alt.Text column, see Lore Sjöberg.

The alt attribute is used in HTML and XHTML documents to specify alternative text (alt text) that is to be rendered when the element to which it is applied cannot be rendered. It is also used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element. In HTML 4.01, the attribute is required for the img and area tags. It is optional for the input tag and the deprecated applet tag.

The syntax of the alt attribute is:

<img alt="...">

<area alt="...">

or

<input alt="...">

Example

Here is an image for which the alt attribute is "In the sky flies a red flag with a white cross whose vertical bar is shifted toward the flagpole."

The HTML for this image might be something like the following:

<img alt="In the sky flies a red flag with a white cross whose vertical bar is shifted toward the flagpole."
     src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Dannebrog.jpg/180px-Dannebrog.jpg"
     width="180" height="135" />

A visually impaired reader using a screen reader such as Orca will hear the alt text in place of the image. A text browser such as Lynx will display the alt text instead of the image. A graphical browser typically will display only the image, and will display the alt text only if the user asks it to show the image's properties. Many graphical browsers can be configured to show the alt text instead of the image.

An alternative alt attribute value would be "The Danish flag".

Common misconceptions

The alt attribute does not always have to literally describe the contents of the image [1]. Keep in mind what would be useful to someone who cannot see the image. The alt attribute is supposed to be an alternative for the image, usually stating its purpose. For example an image of a warning sign alt-text might not be useful if it simply says "a triangle with a yellow background, black border and an exclamation mark". It would be more useful by simply saying "Warning Symbol". (If you just put "Warning!", a user might wonder what that meant. Is their screen reader giving them a warning? Or what if the purpose of the image was to actually show what the warning symbol looks like? Then you could use a literal description.

IE7 renders the alt attribute as tooltip

Internet Explorer 7 and earlier render text in alt attributes as tooltip text in standards non-compliant manner. This behavior led many web developers to misuse alt when they wished to display tooltips containing additional information about images, instead of using the title attribute that was intended for that use. As of Internet Explorer 8 alt attributes no longer render as tooltips.

The alt attribute is commonly, but incorrectly, referred to as the "alt tag".

See also

• longdesc attribute

External links

• How to specify alternate text from the HTML 4.01 specification
• Providing text equivalents for images from Dive Into Accessibility
• Guidelines on alt texts in img elements by Jukka Korpela
• Alternative text for images: the alt attribute by Estelle Weyl
• Mini-FAQ about the alternate text of images by Ian Hickson
• Handy bookmarklets for alt attribute management [2] [3]