Alt attribute

The alt attribute is used in HTML and XHTML documents to specify text that is to be rendered when the element to which it is applied cannot be rendered. In HTML 4.01, the attribute is required for the img and area element types. It is optional for the input element type and the deprecated applet element type.

Uses

Alternative text is especially useful in the following situations:
*For people with low bandwidth connections, who may opt not to load graphics
*For people using handheld devices
*For people with disabilities who use assistive technology, such as refreshable braille displays or screen readers
*For people using a pay per transferred data connection
*For people who may not have Adobe Flash enabled
*Search engine optimization: most search engines interpret the meaning of objects by analyzing their alt attribute

In the early years of Internet development, alternative text was particularly helpful to people using text-only browsers (like Lynx). Nowadays, even when graphical capabilities are taken for granted, alternative text is still highly appreciated by users with accessibility requirements and users looking for ways to optimize their network bandwidth use.

While the use of "meaningful" alt text is necessary to comply with accessibility standards, and is good practice, sometimes an image is used for purely decorative purposes. In this case, one should use an empty alt attribute (alt="").

The "alt tag" Misnomer

The alt attribute is commonly, but incorrectly, referred to as an image's "alt tag". It is not intended to provide "pop up" text or tooltips when a user's mouse hovers over the image, though alt text has historically been presented in this way in some web browsers; HTML's title attribute is intended for supplementary information that can be used in this way. (To use alt correctly and suppress the tooltip that some web browsers generate, a web author can use an empty title attribute.)

Example

Two people approached him. They greeted him, and he gave them the bag.

ee also

*longdesc attribute
*CAPTCHA
*Tooltip

External links

* [http://www.w3.org/TR/html401/struct/objects.html#adef-alt W3C spec section on 'How to specify alternate text']
* [http://diveintoaccessibility.org/day_23_providing_text_equivalents_for_images.html Dive in to accessibility page on alt text]
* [http://www.yourhtmlsource.com/accessibility/contentaccessibility.html Content Accessibility Tutorial]
* [http://www.cs.tut.fi/~jkorpela/html/alt.html Guidelines on alt texts in img elements] by Jukka Korpela
* [http://www.evotech.net/blog/2007/08/alternitive-text-for-images-the-alt-attribute/ Easy tutorial on writing alt attributes] by Estelle Weyl
* [http://www.hixie.ch/advocacy/alttext Mini-FAQ about the alternate text of images] by Ian Hickson
* [http://www.eggrage.co.uk/optimising-alt-attributes/ Optimising Alt Attributes] Guidelines from EggRage