This article is Ready to Use.
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.
The alt attribute is required for images and image buttons. 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.
In this example the images provice important information. The alt text therefore needs to convey the same content.
We accept the these credit cards:
- <img src="visa.png" alt="Visa">
- <img src="americanexpress.png" alt="American Express">
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=""> Crocus bulbs </a>
This example shows a image that is used as a functional icon. A non-empty alt text is mandatory in such cases.
Other attributes that can convey alternative text or longer descriptions:
- W3C WAI Web Accessibility Tutorial on Images
- W3C WAI Web Accessibility Tutorial alt decision tree
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]