Image ALT Tag Tips
ALT Tags are invisible descriptions of images which are read aloud to blind users on a screen reader. Adding ALT text allows authors to include images, but still provide the content in an alternative text based format. If no ALT tags are provided, then a screen reader would only be able to say "IMAGE" or perhaps provide a file name.
WCAG 2.0 Guideline 1.1.1—"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."
This page provides general guidelines on what kinds of text to use in an ALT tag. For specific steps within a specific tool, please select a link within the "Related Links" section.
It's important to not only provide an ALT tag, but also provide one that is useful in the context of the document. You may not need to include every artistic detail, and you may be able to skip over purely decorative images, but those that contain critical information need to have it to spelled out in the ALT text.
A good rule of thumb to consider is to include what you might relay over the phone.
Consider an graphic at an e-commerce which includes two credit card company logos. If you need to know which credit cards are accepted, which would be the better ALT text?
Select Preferred ALT Text for Credit Card Logo
- ALT="Credit Card Logos" (which ones?)
- ALT="Vidi-Visi and Magic Card accepted." (conveys specific cards)
Consider this example of a photograph of the dome of the U.S. Capitol (Picture from Architect of the Capitol Office).
When thinking of an ALT tag, the task would be to consider WHY the image is included. Is it within a political science course? A news story connecting Penn State to an event in Washington? An architecture course? Depending on the context, multiple ALT tags can be used.
Possible ALT Tags for Capital Dome Photograph
- ALT = "Capitol Building" (most Political Science/News)
- ALT = "Capital Dome in neo Classical style. Dome is white, circular with narrow windows on many levels and pillars on the lowest level. See additional details in text." (Architecture course)
Hint on long descriptions: If a description is very technical it may be worth including it in the main text so that all readers can benefit.
A decorative image is one used to enhance the mood of a document, but not to convey actual information. Decorative images can include tool bars, clip art, photographs to add "color" and repetitions of a logo.
Decorative Images do need an ALT Tag, but the ALT tag can be empty (ALT="", best for Web) or a blank space (ALT=" " best for Microsoft Office). Both are valid but produce slightly different results across environments.
ALT tags are generally recommended to be concise (about 150 characters). However, some images are so complex that more information may be needed. Today, most experts recommend including an ALT tag which refers blind users to a text based description elswwhere which is visible to everyone.
See the Complex Images section for different examples.
- Jukka Korpela: Guidelines on Alt Texts in IMG Elements
- WebAIM: Alt Text Blunders
- eHow: How to Write Good Alt Text for the Images on Your Web Page