1. Technology

Writing Great Alt Text

Improving Accessibility and Page Content with Alt Text


What is Alt Text

Alt text is the alternative text used by text browsers and other Web user agents that can't view images. It is also one of the only attributes required by the imagetag. By writing effective alt text you insure that your Web pages are accessible, and give you more places to add SEO text that search engines won't penalize you for.

Alt Text Should Repeat Text in the Image

Any image that has text in it should have that text as the alternative text. You can place other words in the alternative text, but at minimum it should say the same thing as the image.

Remember, as well, that images like logos imply text - for example, when you see the red ball icon on the About.com Web site, they mean "About.com". So the alternative text should say "About.com" and not "company logo" or "About.com logo".

Keep the Text Short

The longer your alternative text, the more difficult it will be to read by text browsers. It can be tempting to write long sentences of alternative text, but keeping them short keeps your pages smaller and smaller pages download faster.

A good rule of thumb for alternative text is to keep it between 5 and 15 words.

Use Your SEO Keywords

People often forget that alternative text can be a great place to put search engine keywords. Alternative text is important and required on images, so search engines are unlikely to penalize you for putting keywords there. But remember that your first priority is to your readers. Keyword spamming in alternative text can be detected and search engines change their rules all the time to prevent spammers.

A good rule of thumb is to use your search engine keywords where they fit with the description of the image, and don't use more than one keyword in your alternative text.

Keep Your Text Meaningful

Remember that the point of alt text is to define the images for your readers. Many Web developers use the alternative text for themselves, including things like image size, image file names, and so on. While this might be useful to you, it does nothing for your readers.

Use Blank Alt Text Only for Icons and Bullets

Periodically you'll use images that don't have any useful descriptive text, such as bullets or simple icons. The best way to use these images is in CSS where you don't need alternative text. But if you absolutely must have them in your HTML, use a blank alt attribute rather than leaving it off altogether.

<img src="bullet.gif" alt=" " />

It may be tempting to put a character like an asterisk (*) to represent a bullet, but this can be more conufusing that simply leaving it blank. And putting the text "bullet" will render even more strangely in a text browser.

Related Video
How to Add Alt Text to a Web Page Image

©2014 About.com. All rights reserved.