This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

alt

Summary

The alt attribute is used as a textual representation for graphics and buttons in browsers that don’t or can’t render images, or when the resource is not found.

Applies to [HTMLImageElement](/dom/HTMLImageElement)
The **alt** attribute is required for [images](/html/elements/img) and [image buttons](/w/index.php?title=html/elements/input/image&action=edit&redlink=1). It should provide a concise and accurate label representing the image, in case that a user is visually disabled, is using browser that doesn’t render images or can’t receive images due to network errors. If no alt attribute is given, a screen reader can only read “image” or the file name, which is especially bad if the image is the sole content of a link.

The alt text should be useful in the context it’s displayed. Which alt text is useful, depends on the function of the image on the page. The content of an alt attribute should use general, non-visual language to accommodate non visual users. For example, a picture of a lake intended to evoke an emotion should have text more descriptive than “Lake” or "Clear, blue lake". “Breathtaking open lake” may be more appropriate.

If an image is not intended to be part of the content of the page, but instead is purely decorative, the alt text can be an empty string. This case could apply for an image used as a border or spacing element or if the image is redundantly described in “regular” text on the page.

If the image contains (non-decorative) text, that text should be in the alternative text in full.

Examples

In this example the images provice important information. The alt text therefore needs to convey the same content.

<p>We accept the these credit cards:</p>
<ul>
   <li><img src="visa.png" alt="Visa"></li>
   <li><img src="americanexpress.png" alt="American Express"></li>
</ul>

Depending on the context, the alt text can be short and simple or more descriptive:

<img src="capitol.jpg" alt="The Capitol">

<img src="capitol.jpg" alt="Capital Dome in neo Classical style. Dome is white, circular with narrow windows on many levels and pillars on the lowest level.">

This example shows a decorative use of an image:

<img src="border.png" alt="">

This example shows a redundant image in a link:

<a href="crocuspage.html">
    <img src="crocus.jpg" alt="">
    <strong> Crocus bulbs</strong>
</a>

This example shows a image that is used as a functional icon. A non-empty alt text is mandatory in such cases.

<a href="javascript:print()">
    <img src="print.png" alt="Print this page">
</a>

Related specifications

HTML5
Proposed Recommendation

See also

Related articles

HTML

Other articles

Other attributes that can convey alternative text or longer descriptions:

External resources

Attributions