Alt Text for Images: A Beginner's Guide

What is "alt text" and when should you use it? How do you write alt text?

By AJ Troxell

alt text image

As you include photos and other images on your webpages, it is important that you include "alt" text. This is alternative text that will display for users with disabilities, who may use a screen reader application. It is important for accessibility compliance and is a good habit to get into for effective SEO -- and a task that is easy to overlook. Including alt text is part of a healthy website and a successful SEO strategy.

However, this is trickier than it sounds and should be carefully done.

ALT TEXT: THE BASICS

The good news: not every image should have a value set for its alt attribute. But each image should have the alt text code (alt="").

When you are using alt text, a good rule of thumb is to keep it at fewer than 125 characters. If you write longer, the text will likely be cut off by screen-reading tools.

WHEN TO WRITE ALT TEXT

IMAGE YES NO

The image is text only.

If the text in the image is relevant to the surrounding content write the alt text verbatim to the graphic’s text.

If the text in the image is not relevant to the surrounding content leave the alt tag empty.

Logos

Only write the name of the company. Do not include "logo"; it is not necessary


alt= "LRS"; not "LRS logo"

 

The image adds to the content and adds value to the other text. It is not decorative.

The text should describe the photo. Keep the text minimal. See below for more detail.

 

The image does NOT add any value to the rest of the content. "Presentation only" images.

 

Leave the alt tag empty. Screen readers will bypass the image.

The image is next to the related text.

 

Leave the alt tag empty. Don’t repeat content.

Decorative Images /Window Dressing/Eye Candy:

Images may be decorative when they are:

  • Visual styling elements (decorative borders, corners);
  • Reflects the text in the article without adding additional information.
 

Leave the alt tag empty. Alt text would be duplicative or pointless – it would not add value for the user.

For a quick learning map about alt text, go to www.w3.org/WAI/tutorials/images/decision-tree/.



HOW TO WRITE ALT TEXT

When you determine that your image needs alt text, keep in mind the content and context of the image. In most cases, the alt attribute should:

  • Describe the content and purpose of the image. Use both the image's subject and context to guide you. Also, be representative of the topic of the webpage it's supporting. Be as specific as possible.
    • OK alt text: alt="Woman leading a meeting in a conference room."
    • Better alt text: alt="CEO Susan Smith leading the marketing staff at the Smith-Marketing Headquarters in Springfield."
  • Be short. A few words are fine (<125 characters).
  • Don’t be redundant or provide the same information as the text around the image.
  • Don’t use the phrases like "image of ..." "picture of" or "graphic of ..." The HTML source code indicates to screen-reading tools that the object is an image.
  • Include keywords carefully. Use natural words and synonyms. Don’t stuff the keywords – make sure they make sense with the picture.
  • For multiple, yet similar images: Include a core keyword in the lead image.
  • Use the target keyword in your image file name.

Including alt text, when done carefully and purposefully, can improve your SEO.


ALT Text for LRS Antilles CMS Users

3 EASY STEPS:

First, insert the image on the page. (Watch the 2-minute video below to learn how to upload images and files to a page.) Then you're ready to add the alt text.

  1. Click once on the image and then click on the 3-line box in the bar at the bottom of the photo.
    how to add alt text -step1
  2. Write your alt text in "Image Description."
    how to add alt text - step 2
  3. Click OK

LRS Antilles users: Here's how to upload images and files to your webpage: