ALT Text and Text Alternatives

For images of text, use the image text as ALT text

Techniques

In general, avoid using images of text when actual text is available. If you must use an image to represent text, use the same text to provide ALT text for the image. This practice can be tricky, as images with text sometimes provide other functionality (links, submit buttons). Be aware of interaction and function, and see that those contexts are also exposed to the user.

In general, do not use "Image of...", "Logo of...", "Button for..." or similar constructions in your ALT text.

Wordmarks and logos

Wordmarks, where the primary branding message is in the text

Example: University Wordmark

The University of Iowa

<img src="UIWordmark.png" alt="The University of Iowa" />

Links and navigation

Graphical links with flattened text should use the same text in ALT text.

Example: Graphical link button with text

Home

<a href="home.html"><img src="home-button.png" alt="Home" /></a>

Functional images with text

Graphical buttons and icons that employ text should use that text as ALT content.

Example: Image Input

Submit Search

<input type="image" src="submit.png" alt="Submit Search" />