Writing Alternative Text and Image Captions

Using a combination of alternative text and image captions is necessary for the accessibility of your website, as it helps to aid those who may not have the benefit of seeing the images on your pages to still understand the meaning of your content.

What is alternative text?

Alternative text is a feature used to convey the content of an image in a non-visual manner by providing a textual description of what is being presented. This is beneficial to people who are browsing a web page but may not have the ability to visually experience the page or the images contained within it.

There are several scenarios that can lead to a website visitor being unable to see a webpage or the images contained in it.

People with visual impairments

Website visitors who are blind or have visual impairments will often rely on assistive technology to consume webpages. Screen readers are a common type of assistive technology used by the visually impaired. They are programs that allow a user to have a webpage read aloud to them. Details like the page’s title, headings, paragraphs, and bulleted lists are spoken to the user just as they are presented visually on the screen. Images, however, require that an author of a webpage include accurate alternative text that can then be conveyed to the visitor.

Images aren’t able to be downloaded

Alternative text can also be of use whenever an image is unable to be downloaded and presented by a person’s browser. This may occur when the person’s internet connection becomes unstable or unavailable. It may also occur when a browser plug-in or a web filter blocks an image from being downloaded.

When a browser is unable to present an image in a web page, it will typically keep an empty space on the page where the image would normally be shown. Then, the browser will fill that space with any alternative text that is provided. This will allow the meaning of the image to come through without having the actual image present.

Tips for writing alternative text for images

• Keep alternative text concise, but very descriptive of what is being visually conveyed by the image. A good guideline for the length of alternative text is a sentence or two.

• Use complete sentences, proper punctuation, and conventional grammar rules when writing alternative text. Proper punctuation and grammar helps assistive technology to use the appropriate cadence when conveying the alternative text to website visitors.

What are image captions, and how do they differ from alternative text?

Image captions are text that appear adjacent to an image, typically below the image. They are used to convey additional information that is not present in the image itself, or information that is tangentially related to the image.

Image captions differ in comparison to alternative text. Alternative text’s purpose, as we have learned, is to describe what is visually present in an image. Image captions are not intended to be used in this manner. Also, alternative text only appears visually on a page when an image fails to display, whereas image captions are usually always visible.

Alternative text should always be included with an image. Image captions, on the other hand, are optional and should only be used to add additional context or understanding as to the meaning of the image or why it is being included on the page.

Because of the differences in purpose, it is important to note that an image’s caption should never be the same as its alternative text. This would result in the same content being conveyed to a site visitor twice.

In general, when determining what to include in image captions versus alternative text, it may help to think of these questions:

• When writing alternative text, ask yourself, “What is being visually depicted in this image?” Imagine you had to describe the image to someone while having a conversation with them over the phone. Your alternative text should be similar to that description.

• When writing image captions, it may be helpful to ask, “Why is this image being included here on this page or in this particular spot?”, or “Is there something about this image that may need further explanation beyond what is being depicted in the image or described by the alternative text?” If the answer is yes, consider adding a caption to the image.

Examples

The above image, originally found on the School of Nursing’s “About” page, has the following alternative text:

A student in blue scrubs adjusts tubing on a patient simulator while a faculty member in a white lab coat assists in a clinical training room with medical equipment and privacy curtains.

This is a good example of well-written alternative text, as it describes who is in the photo, what they are doing, and where they are doing it. It also uses complete sentences and proper grammar. The text is detailed yet concise.

Another example, taken again from a student’s profile on the School of Nursing site, has this as its alternative text:

A graduate in a white dress wearing their gold graduation gown, stands smiling with a stethoscope resting around their neck. They are standing in front of a red brick wall, which has the corner of a window present in the bottom left and some shrubbery in the bottom right.

Again, we are describing the who/what in the photo, along with clues about the where. 

It’s important to also note what is not included in this alternative text. We don’t include any information about the person in the photo that cannot be inferred from the photo itself. The person’s name is not easily discernible from the photo alone, so it is not included in the alternative text. It’s also advisable to not assume a person’s gender simply by their appearance in the photo. In this example, we have also not included a specific location, as the setting only gives us clues as to where the photo was taken and is not likely to be easily inferred by looking at the photo directly.