ALT Text and Text Alternatives

Include an ALT attribute for every IMG element

Techniques

Images that lack ALT text are a barrier to access. The content of the ALT attribute helps the user understand the purpose of the image, whether the image is content-bearing or interactive, what action to take, or even whether the image can safely be ignored.

Regardless of content, function, or context, every foreground image in a site requires an ALT attribute, even if the ALT attribute is empty.

Images that accompany articles or other content

ALT text should stand in for the image—use ALT text that conveys the meaning of your images or area elements.

Example: Accent Image

Accent image demo: Code Follows

<img src="images/oldcap.png" alt="Old Capitol Building, University of Iowa Campus" />

Decorative Images

Decorative images should be accompanied by empty ALT text. Alternatively, decorative images may be presented as background images.

Example: Decorative Divider

Decorative Image Demo: Code Follows

<img src="stars-divider.png" alt="" />

Functional Images

Functional icons and buttons should use ALT text to provide guidance to their main functions

Example: Shopping Cart Button

Functional Image Demo: Code Follows

<button src="shopping-cart.png" alt="Add to shopping cart" onclick="addToCart();" />

Images with Adjacent Descriptions

If an image is accompanied by descriptive information, then use an empty ALT attribute.

Example: Directory Listing

Todd Weissenberger
Web Accessibility Coordinator

 

<p><img src="todd-weissenberger.jpg" alt="" /></p>
<p>Todd Weissenberger<br />Web Accessibility Coordinator</p>