Using ALT Attibutes to Provide Accessible Text Alternatives to Images

How can I provide meaningful alternative text to HTML images?

All Images MUST have Alternative text. Meaningful images should have meaningful ALT text, and unimportant images should have ALT="" (Null Alt). A screen reader will read these ALT attributes to provide a description of the graphic and for this reason, they should be accurate. If you can read the ALT attribute to someone over the phone and they can understand what the meaning of the picture really is, then you have described it well.

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.

 Two Examples Desciptive ALT text:

 

Actual ALT text:  ALT= "Ryan Newman"

Better ALT text: ALT= "Ryan Newman pulls a burnout to celebrate NASCAR DL400 win"

 

Actual ALT text:  ALT= "Bryant Gumbel"

Better ALT text: ALT= "Viagra Sponsored NASCAR Race Car "

notice: Bryant Gumbel is not in the photo

 

Other Resources