Our Guide to Alt Text and Other Image Descriptions

The internet allows easy access to information, goods, and services, even from businesses or organizations outside their hometown or state. Sometimes, though, that accessibility is inadequate—visual impairments or device limitations could prevent people from seeing images properly.

To help people with these concerns, web administrators or site owners can add image descriptions like alternative text and captions. These elements help readers get a sense of the image and its purpose.

Why Include Image Descriptions?

Alt or alternative text helps people who use screen readers. Since a screen reader relies on text to read information aloud, alt text gives the user a clue to what the image depicts. This screen element also helps people who need to enlarge the screen since text scales better than images. Some non-neurotypical persons understand words better than images, so switching to a text-based web view helps them navigate the internet. Also, people who use voice recognition software need alt text for controls displayed as images.

How to Write Helpful Image Descriptions

When writing alt text, you need to learn how to convey the most information using the fewest words possible. Consider what people gain visually from the picture. For example, how would you describe the image below to someone who cannot see it?

The alt text could read, "A man sits at a table with a computer, jotting down ideas in a notebook." This is a short enough explanation and captures the essence of the picture. Alt text should be approximately ten to 15 words or 140 characters since some platforms truncate alt text at a certain point. 

The Difference between Alt Text and Captions

Alt text and captions are similar page elements, but they are distinct. Web pages display captions under the actual image, but it hides alt text from sighted users or those who choose to view the page's images. Someone using assistive technology will get the alt text read out to them.

If your image has a caption, include descriptive details or a short commentary different from what you have in the alt text. Screen readers will pass over both the alt text and the caption, which sometimes results in redundancy. For instance, if you're using the image and alt text from the previous example, the caption should do more than describe the subject's demeanor or actions. You could write the person's name, their significance to the larger text, or why they're acting the way they do.

How to Add Alt Text to Your Page

You can add alt text to your page using HTML tags or through the rich text editor bundled with your CMS. If you're using HTML, you can use the <img> tag to include that page attribute. For example:

<img src="man-at-desk.png" alt="A man sits at a table with a computer, jotting down ideas in a notebook.">

When using online rich text editors like WordPress, Canvas, or Drupal, you will typically find a field or tab that says "Alt text" or a similar term. All you need to do is write the alt text on the space provided, and the processor will format it for you.

You can also add alt text after you've added the image. Right-click on the added image, select "Image Properties" or its equivalent, and find the alt text prompt in the image properties dialog box.

How to Add Alt Text to Complex Images

Graphs, charts, and diagrams contain a significant amount of data. These page elements contain too much information for a single line of alt text. Instead, you can describe this image using long descriptions. 

This alt text gives sight-challenged users equal access to the information on the page and accounts for lists, tables, diagrams, and other complicated on-page structures. The National Center for Accessible Media (NCAM) has guidelines for describing complex images.

How to Add Long Descriptions in HTML

You can add a long description in HTML either on a separate web page or using a <div> tag with an id attribute. You can hide this type of <div> element from sighted users, but you might want to include it to help them as well. Some persons find it challenging to understand charts, graphs, and other visually symbolic content. 

Once you have the long description written and placed, add a longdesc attribute to the image element and point to the long description's URL. Take the example below, where the description is on another page:

<img src="figure1.png" alt="Figure 1. Rate in product use over time" longdesc="figure1-longdesc.html">

Do You Need Alt Text For Decorative Images?

If an image does not contribute to a better understanding of the text, you can leave the alt text blank. You can also give specific instructions to the screen reader and skip the alt text for these specific images.

Do not use the <img> element for decorative images in HTML. Instead, use CSS or cascading style sheets to present the picture as a background image. You can also use the <img> element but add an empty alt attribute (e.g. alt="").

Conclusion

Alt text and captions help people better understand the visual elements of a web page. Including these in your SEO checklist will enable you to reach more users and shows customers that you want them to have the best on-page experience possible.

Get the nitty-gritty of your marketing strategy right with fully-managed SEO from Ranked. Our team delivers optimization made to scale with you, using KPIs you set for your website. Book a call with the team or activate your account today!