Guide to Alt Text for Emails

Emails sent by USF must comply with web accessibility standards. That means images must have alternative text, and hyperlinks must either be descriptive enough to stand alone, or include “aria-label text” that provides a more detailed description. Aria-label text is text that the screen reader reads in place of the text shown on the screen (see Example 2 below).

This guide shows examples of common email scenarios, and potential solutions for alternative text and hyperlinks.

Remember, there’s no one “correct” way to tackle these issues. See the Image Alternative Text guide for more detailed information.

Example 1

The main image in this email is a collage. Instead of trying to describe each individual image, the alt text might be: “Collage of wine-related images”

Example 2

The main image, for all intents and purposes, mirrors exactly what is written below it: “Women’s Basketball vs. Pacific.” So alt text describing the image is not necessary. However, since the image is also a clickable link, there needs to be alt text that describes where the link leads. Suitable alt text might be: “USF vs. Pacific women’s basketball registration page.”

In addition, the “Purchase Tickets” link below the subheadline is not descriptive enough. It does not convey any context about where the link leads and what is being purchased. One solution is to create aria-label text that says: “Purchase tickets for USF vs. Pacific women’s basketball.”

The email will still display the text “Purchase tickets”, but the screen reader will read the more detailed description.

Example 3

This “Opening Weekend 2018” image links to the Opening Weekend registration page. It’s important to include what is written in the image in the alt text. Suitable alt text would be: “Opening Weekend 2018 page”

Example 4

In this example, three links go to the same ticket purchasing page: The main image, the first “Buy Now” link, and the second “Buy Now” link.

To avoid redundancy, it’s best to use just one link — or two at most — per event.

A solution is to wrap the image and the title “Baseball vs. Nevada | Buy Now »” so that it’s all one large clickable link.

Example 5

For these images it is unnecessary to create alt text describing the images, because the image text and context mirrors the subheadlines below. However, if the images are links, you should still create an alt text that describes where the link leads. For example: “Walls Without Borders Facebook page”