Alternative Text

When we use images in our course content, we often operate under the assumption that users can visually see and interpret the content in them.

But, what happens when a student can’t see the image?

The "Image" Problem

In an educational context like ours, what happens if a student who can’t see has to answer a test question, complete an activity, or submit an assignment based off their understanding of that image?

Without an image description, our content design has set them up for failure.

In this scenario, some users may opt to use a screen reader, which is an assistive technology that converts digital content into spoken or braille output.  Some common screen readers include:

• JAWS: most popular screen reader, available for download on Windows
• NVDA: free and available for download on Windows
• VoiceOver: integrated into MacOS and iOS

While screen readers can help blind or vision impaired users interact with digital content on a screen, they cannot describe the actual content within an image. When a screen reader encounters an image without a description, it merely announces “image” and moves on. This ultimately excludes screen reader users from engagement and learning. So, what is the solution? Content creators must provide image descriptions in the form of alternative text.

 

The "Image Solution": Alternative Text

Alternative text (or alt-text) is the short written description that typically appears in place of an image on a webpage or in a document. The purpose of alt-text is to textually describe a visual image in such a way that someone who can't see the image can understand that image's meaning.

Alternative text is comprised of two parts:

1. The HTML code
2. A brief description of the image

The combination of these two parts enables screen readers to read aloud a description of the image, bridging the accessibility gap for blind or visually impaired learners.

The combination of these two parts enables screen readers to read aloud a description of the image, bridging the accessibility gap for blind or visually impaired learners.

Simple Alt Text Example

The following is an example of simple alt text that describes a photo.

Please note: the alt text for this photo looks like a caption for illustrative purposes. Alt text is not normally displayed with images.

Alternative Text: One of the bridges over the Red River in Grand Forks, ND. Behind the bridge is a brilliant blue sky with a few clouds hovering nearer the horizon. In the foreground, a person is walking along a path toward the bridge.

Benefits of Alt Text

• For users with visual impairments, alt text can be read aloud by screen readers. Note: if an image is complex, long description may be needed in addition to alt text.
• Written descriptions can help users process complex visual information by presenting it in multiple ways.
• Alt text is available to search engines, increasing a website’s search engine optimization.
• It can be used for voice navigation on graphical links.
• When images don’t load, alt text is displayed. This is particularly helpful when access to the internet is limited, and a broken image is displayed.

Guidelines for Writing Effective Alternative Text

Alternative text should be both concise and meaningful to the listener. It conveys the purpose of an image, not every detail. Consider the following when writing alt text:

• Be concise – no longer than 120 characters.
• Consider the target audience. How much knowledge do you expect the audience to have on the topic?
• If the image is also a link, the alt text should describe the link target.
• If there is text in the image, include it in the alt text.
• Avoid redundant statements like “Image of” or “This is a picture of.” A screen reader will already announce that it is an image.
• If the image is already described in the surrounding text, the alt text can be very short.
• If an image is purely decorative, mark it as such (various methods depending on software).
• What is the context of the image? What meaning does it add to the page? Describe only what you expect visual users to get out of the image.

A Note About Automatic Alt Text

In many cases, programs such as Microsoft Word or PowerPoint, will automatically generate alt text for images, either using artificial intelligence, or inserting the filename or URL that the image originally came from. Automatically generated alt text is, at best, only a guestimate. At its worst, automatic alt text is actually more harmful than helpful. It's important to check alt text manually to ensure that if offers a helpful description.

 

Add Alternative Text in...