Accessible Image Alt Text

Table of Contents

1. Priority
2. Description
3. More Info
4. Coding/Best Practices
5. Testing/QA
6. Search Engine Optimization (SEO)
7. W3C Guidelines

Priority:

Required

Short Discription:

All graphics REQUIRE indicative and descriptive alt attributes, particularly if the graphic is used as a clickable button, promo, or list item (e.g. sports team logo). Graphics not relevant to actual content (spacer graphics used for layout for example), should implement the alt attribute as follows: alt=""

More Info:

Blind and low vision users can not see images. They receive information about them from ALT attribute in the HTML IMG tag. Also, keep in mind, search engines can not see the images either and rely on the ALT attribute to rank your page.

1. It is important that every IMG tag has an ALT attribute.
2. Un-important images like right_table_corner.gif, should have alt="".
3. Because screen readers speak the alt text of the image it is important they be meaninful. If the alt attribute is missing, the screen reader will speak the file name; therefore, it is important to create an alt attribute for each IMG tag even if it is null or empty.
4. Alt text should not use the same name as the file name.
5. Alt text should be less then 150 characters.
6. Alt Text with more than 150 characters require a long description.
7. Important images should not have spacer text as an ALT Attribute.
8. Alt text should not be a place holder (Photo 1, Photo 2, etc).
9. Alt text can not be empty if image is used in an Anchor.
10. When using images as anchors the ALT attributes must be distinct. Don't use "Buy". Use "Buy Sony Model 714 Camera."
11. Imagine you are reading the links to a friend over the phone. Would your friend understand the meaning of the image from the ALT text alone?
12. Google and other search engines can not see the images on your page. You will rank higher on the search engine if you provide good ALT attributes.

Guideline 1. Provide equivalent alternatives to auditory and visual content.

Although some people cannot use images, movies, sounds, applets, etc. directly, they may still use pages that include equivalent information to the visual or auditory content. The equivalent information must serve the same purpose as the visual or auditory content. Thus, a text equivalent for an image of an upward arrow that links to a table of contents could be "Go to table of contents". In some cases, an equivalent should also describe the appearance of visual content (e.g., for complex charts, billboards, or diagrams) or the sound of auditory content (e.g., for audio samples used in education).

This guideline emphasizes the importance of providing text equivalents of non-text content (images, pre-recorded audio, video). The power of text equivalents lies in their capacity to be rendered in ways that are accessible to people from various disability groups using a variety of technologies. Text can be readily output to speech synthesizers and braille displays, and can be presented visually (in a variety of sizes) on computer displays and paper. Synthesized speech is critical for individuals who are blind and for many people with the reading difficulties that often accompany cognitive disabilities and learning disabilities. Braille is essential for individuals who are both deaf and blind, as well as many individuals whose only sensory disability is blindness. Text displayed visually benefits users who are deaf as well as the majority of Web users.

Providing non-text equivalents (e.g., pictures, videos, and pre-recorded audio) of text is also beneficial to some users, especially nonreaders or people who have difficulty reading. In movies or visual presentations, visual action such as body language or other visual cues may not be accompanied by enough audio information to convey the same information. Unless verbal descriptions of this visual information are provided, people who cannot see (or look at) the visual content will not be able to perceive it.

Coding:

Best Practices:

What makes a good ALT tag?

Example:
<img src="aol.gif" alt="America Online"/>
or
<img src=“corner.gif” alt=“”/>

Testing:

Testing with AIS Toolbar.

Example: BBC Home Page

This page shows very good use of Image ALT Attributes.

Example: Market Indices

This page shows missing Image ALT Attributes.

---

SEO:

All published photos and graphical content contain alt text that describe the content of the image in a complete sentence in natural language

• The alt attribute enables search engines to associate keywords with image content (Image Search)
• The alt attribute should describe the content of the image
  • Example: "John Elway"
  • Compliant: "John Elway celebrates a touchdown pass in his first game back from retirement"
• Aesthetic template graphics (gradients, rounded corners, etc.) should be included in the CSS wherever possible
  • If included inside HTML, ensure alt text is set to "".

---

W3C:

HTML Techniques for Web Content Accessibility Guidelines 1.0

W3C WAI Guidelines for Images and Image Maps

---

Back to top