Alternative Text

Why is alternative text required?

While it is a requirement in federal and state regulations, there are some obvious functionality problems that can and will occur, such as graphics not loading up in areas with low internal connections/signals. When a graphic does not load, alternative text appears on the screen. If the text does not provide context for your message, your constituents will not understand the full purpose of your content. Alternative text also allows you to include keywords important for your SEO rankings.

Before placing graphics on web or non-web content, you should consider universal design (relaying a message once by providing all the necessary components to look seamless) when organizing your content:

(e.g., a graphic with an un-selectable table of data):

Screen readers cannot scan, skip, or pause and resume reading the alternative text.
Your constituents cannot highlight the text of your graphics to copy/paste anywhere else, which creates an undue burden of forcing them to type and memorize content.
Your constituents with low vision cannot zoom into the image enough to easily read the text on your graphics.

Artificial intelligence (AI) tools are becoming more available for describing images. Some are improving in accuracy. They should be used with caution. Check the quality of the description. Make sure it includes your context.

See examples described by Coco Poley in How to Use a Free AI Alternative Text Generator (February 17, 2024, How-to-Geek).

Other notable AI tools:

Arizona State University Image Accessibility Creator: Great for long descriptions. Also includes a suggested "Alt-Text". Add details about the image to help the AI tool.

Guidelines for Alternative Text

Imagine the graphic is not there on the document − just text − and provide extra meaning to your message:

Determine what the purpose of your graphic is: emotional, functional and/or instructional?
Use terminology that relates to your constituents.
If parts of the graphic are important, describe them.

In other words, keep it short and sweet, but include information your visually able constituents would be able to take away from it.

Redundancy: Terms like "image of", "logo", and "picture" are not required, since the screen reader informs your blind constituents that they are on a graphic.
Style/Theme: Unless the style of the graphic displayed is part of your narrative to draw a certain response, you do not need to describe how the graphic is designed.
Length: Unless you are describing a complex graph, chart or anatomy of an object, a thesis paper is not necessary. If you are, you will need to link to a separate page with a longer textual description.

Bad Alternative Text Examples
Bad Alternative Text	Why is it Ineffective?
cid:image001.jpg@04C05A06.045DFC78	Caused by a lack of alternative text when viewed on certain mobile video. It provide no information whatsoever of what the image is about. It is not readable, burdening screen reader users as it spells out each character or reads out each word.
04C05A06045DFC78	Caused by poor application design when alternative text is not provide by content maintainers. The random numbers and letters generated provide no information whatsoever of what the image is about. It is not readable, burdening screen reader users as it spells out each character.
filename.jpg	It provide no information whatsoever of what the image is about. It is not readable, burdening screen reader users as it spells out each character or reads out each word, followed by the spelling of the file extension.
Dog	While accurate if it is a picture of a dog, it does not provide the additional information the visual user may be receiving, including tone or purpose.
Image of a dog	While accurate if it is a picture of a dog, it does not provide the additional information the visual user may be receiving, including tone or purpose. It also is redundant as the screen reader already notifies the user that they are viewing an image, picture or graphic.
Texas A&M University - Corpus Christi's primary blue background, with white text of Texas A&M University in 12 point above Corpus Christi in 16 point, all uppercase with a drop shadow of 1 pixel to the bottom right of the text. Same white and drop shadow style on the Momentum logomark to the left of the text.	This might be an accurate description of the logo for Texas A&M University - Corpus Christi, however, this description is better suited outside the image on a marketing design page, not every electronic document. It is over 155 characters in length, so portions of its description are also lost depending on the screen reader.
Click here to fill out the application	It does include a call to action, however, it assumes the method that every video uses is the click functionality of a mouse.

Taking some of the bad alternative text examples above, here are some tips on how to properly convey the importance of the image in alternative text:

Alternative Text Guidance
Bad Alternative Text	What Do You Need to Convey?
Dog	What is the dog doing and how should it make the visual user feel? Is it informative, like a diagram, requiring some explanation not covered in the text around the image?
Texas A&M University - Corpus Christi's primary blue background, with white text of Texas A&M University in 12 point above Corpus Christi in 16 point, all uppercase with a drop shadow of 1 pixel to the bottom right of the text. Same white and drop shadow style on the Momentum logomark to the left of the text.	When referencing a logo of any kind, stick to the important text. A&M - Corpus Christi requirements for alternative text on our logo include "Texas A&M University - Corpus Christi". Note "logo of" is also not included as it is understood when used in the header or footer of a document.
Click here to fill out the application	Instructions in a call to action should be succinct yet specific. E.g. "Fill out the application by January 30"

How-to

Add the alternative text attribute alt to the image tag img: <img src="filename.jpg" alt="[image description]"/>.

If context would be missing if the image were removed: replace [image description] with the alternative text using the previous guidance on this page.
If no context would be missing if the image were removed: replace [image description] with nothing at all. It would look something like this <img src="filename.jpg" alt=""/>.

There are multiple ways to add alternative text to images in Cascade:

Image Area

There are Image areas throughout the Cascade page templates.

When Editing a Cascade page and where you can select an image in the Image field, there will be an Alternative Text field below it.

Alternative Text fields are required.
Images in these areas cannot be designated as decorative.

Rich Text Editor

When Editing a Cascade page, you can Insert/edit image in the rich text editor areas.

Fill out the Image description field or
Check the Decorative box: “This is a decorative image, no description is needed”

Microsoft 365 applications have an Alt Text menu option in the Format ribbon of a selected image. You can also use context menu on an image and select Edit Alt Text...

Fill out the description field or
Check the Mark as decorative box

View the Microsoft video on Improve accessibility with alt text. Please note the video demonstrates how to access the alternative text field in older versions of Microsoft Office 365 applications. However, it shows good tips when adding the descriptions to more than just images.

Alternative Text

Why is alternative text required?

Guidelines for Alternative Text

How-to

Image Area

Rich Text Editor

References

EIR Accessibility Coordinator

Alternative Text

Why is alternative text required?

Avoid repetition

Avoid text heavy images

Use AI tools for guidance, not the final alternative text

Guidelines for Alternative Text

Keep alternative text short and concise

Treat alternative text just like normal text