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
If the image is a collage, instead of trying to describe each individual image, the alt text might be: “Collage of wine-related images”
Example 2
If the main image, for all intents and purposes, mirrors exactly what is written below it; i.e. picture of women's basketball game with the text below it: “Women’s Basketball vs. Pacific.” So alt text describing the image is not necessary. However, if 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, a link with the text "Purchase Tickets" 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
It is important to include the text in the image. If an image displaying the text "Opening Weekend" links to the Opening Weekend registration page, suitable alt text would be "Opening Weekend registration page."
Example 4
There may be multiple links that lead to the same thing. 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
If the image text and context mirrors the subheadlines below, it is unnecessary to create alt text. 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”