Writing Great Alt Text for Website Images

Improving accessibility and page content

Photography equipment and laptop ready for photo shoot in studio
Hero Images / Getty Images

In addition to choosing the right images and properly preparing them for the web, writing great alt text is a crucial task that you should never neglect. Here are a few pointers for writing effective alt text for your website's images.

Repeat Text in the Image

If an image has text in it, that text should be the alt text. You can add other words, but the alt text should say the same thing as the image. For example, a logo for Acme Widgets that features the actual words should have alt text that includes those words.

Bear in mind that images such as logos can imply text—like the red ball in the Dotdash logo, for example. It's a dot, so the brain reads and remembers "dot dash." The alt text for that icon could be "Dotdash.com," not just "company logo."

Dot dash logo
 Lifewire

Keep the Text Short

The longer your alt text, the more difficult it is be to read for text browsers. It can be tempting to write long sentences of alt text (a common keyword-stuffing practice that can incur SEO penalties), but keeping your alt tags short keeps your pages smaller. Smaller pages download faster. The sweet spot is between five and 15 words.

Using Your SEO Keywords in Alt Tags

The main purpose of the alt tag is not to boost SEO value, but to display intelligent text that explains what the image is. Informative, relevant text for your alt tag, however, has a positive effect on SEO value.

That said, using your keywords in alt text is a good practice as long as they're pertinent. Search engines are unlikely to penalize you for putting keywords there if the content you add makes sense. Just remember that your first priority is to your readers. Search engines detect keyword spamming easily, and search engines change their rules frequently to thwart spammers.

Generally, 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 images for your readers. Many web developers use alt text for themselves and include information such as image size, file names, and so on. This might be useful to you, but it does nothing for your readers—who are the priority in any web design.

Use Blank Alt Text Only for Icons and Bullets

Periodically, you'll use images that have no useful descriptive text, such as bullets and 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.

It may be tempting to use a character such as an asterisk to represent a bullet, but this can be more confusing than simply leaving it blank. Using the text "bullet" would render even more strangely in a text browser.

Why Is Alt Text So Important, Anyway?

Text browsers and other web user agents that can't view images use alt text to "read" the images. This accomplishes several things:

  • It makes your web pages accessible to people who are using a screen reader or other assisted device.
  • If an image fails to load, the alt text lets the viewer know what should be there.
  • Search engines can't "see" images, but they can and do spider alt text—so including alt text helps your page's SEO value.