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 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
alt
Other articles
Other attributes that can convey alternative text or longer descriptions:
External resources
- W3C WAI Web Accessibility Tutorial on Images
- W3C WAI Web Accessibility Tutorial alt decision tree
- http://www.w3.org/TR/2012/WD-html-alt-techniques-20120329/#secm1
- http://www.w3.org/TR/html5/forms.html#attr-input-alt
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]