Using Alternative Text in Images

Using Alternative Text in Images
Using Alternative Text in Images

Images can serve many different purposes from simple decoration to visuals of complex processes. Using them in your online learning content can be a great way to create visual representations of your subject matter.

An important consideration when inserting images into your content is how you’ll make them available to someone who is unable to see them. When provided with a text representation of an image, many people with sight impairments have the ability to visualize the graphic.

A text representation of an image is another way to say an image is alternative text. The good news is that many text editors provide a place for you to replace an image with alternative text.

The image will remain visible in your content but the text representation will be available to those who need it the most. And when it’s time to write alternative text, simply think about the context of the image within your content.

For example:

Consider this image of a beekeeper.

Image of a beekeeper in a document
Image of a beekeeper in a document

Three questions to consider are:

  1. Am I using this image basically as decoration?
  2. Is the image a visual example of something I described thoroughly in the typed content?
  3. Do I intend for the image to provide additional information to supplement a point I made in the content?

The thing is, your approach to writing the alternative text will differ depending upon the context of how you used the image so let’s take a closer look at each of these situations.

In the sample above, the beekeeper image is just a decorative visual. We added it to the end of this document because we mentioned beekeeping as a hobby you’d like to explore. In this instance, the image doesn’t need much.

If the decorative image were removed, the quality of the content will not really degrade so the alternative text could simply be a couple of words to state what’s in the image so a simple phrase like “Beekeeper collecting wax from a hive” will suffice.

Adding an alternative text to an image in a document
Adding an alternative text to an image in a document

When a vision-impaired learner hears this alternative text, it will be clear that there is no important learning content to be gleaned from the image.

Now let’s take a look at the images on this page.

A document about beekeeping precautions with images

Leading up to these images, the topic has been an overview of precautions to take while beekeeping, and in the previous paragraph we talked about what should be worn for safety when working around the hives.

These two images are examples of safety clothing. They are visual examples of something we described thoroughly in the previous content  so each of their alternative text will represent an overview of what is seen in the pictures.

For example, to address the first image, you could type “Beekeeper wearing a hat and veil, a one-piece long-sleeved jumpsuit and plastic gloves.”

For the second image, you could type, “Beekeeper wearing hat and screen, a one-piece long-sleeved jumpsuit and plastic gloves.”

Let’s see if we can apply what we’ve learned so far. Here we’ve displayed an image of Nikola Tesla near a list of a few of his inventions. Would this be considered a decorative image or an example image?

Image of Nikola Tesla and a list of his inventions
Image of Nikola Tesla and a list of his inventions

To answer that, remember to think about the context of the image. In this case, if we removed the image of Mr. Tesla, the content would not suffer so this is a decorative image. For its alternative text, we could type “Nikola Tesla”.

But let’s say we change the context so that the image is an example of one of Mr. Tesla’s inventions. Because it is now an example, we’ll type as our alternative text an overview of what’s seen in the image, “A Tesla coil expending electrical current”.

Finally, there may be times when you’ll need an image to supplement your content. It’s purpose will be to accompany a point made in the content and to provide additional information.

Let’s return to the image of the beekeeper collecting wax and let’s say that the topic of this lecture is a discussion on beehive management. We’re using this image because it helps students visualize a point we made about the number of beehives that can be economically viable in one location.

The context of this image is neither a decoration nor an example. In this context, it is some of the content so it will require a longer description so your students can learn what you intend for them to learn from it. The long description should be a part of the lecture content so all of the students can benefit from it so we’ll type it near the image.

Here’s another example of an image requiring a long description because it is content. The image demonstrates the life cycle of a deer tick as it depends on the life cycle of the white-footed mouse so we wrote a long description of the process under the image.

Image with a long description of the process under it

Images that you have written a long description for will still need an alternative text. We’ll treat the alternative text for this life cycle image as we would an example image. We’ll type, “Parasitic life cycle of the deer tick “as it relies on the life cycle of the white-footed mouse.

Deciding to use images is a great way to help students visualize your content. Alternative text is required for all images and a long description should be provided when the context of the image requires it.

About the author

David Cote

David Cote believes that all users should have a reasonably equivalent experience when accessing a piece of content and that the WCAG guidelines can make this possible. He writes articles which may help website developers and designers to make their projects more compliant with these standards.

Add Comment

Click here to post a comment