Alt Text Best Practices

This guide provides information on how to use and create alternate (alt) text on TU’s website and other digital properties.

What is Alt Text?

Alt text, sometimes known as “alt attributes” or “alt descriptions,” is text (in HTML or other written, electronic copy) used to convey the image’s content or function to screen-reading software. Alt text is also used in place of an image in the event of broken image links or insufficient bandwidth to load images. Alt text can help to optimize your content for web image searches, although “stuffing” keywords into alt text solely to drive search results should be avoided.

Crafting Alt Text

Before writing alt text, determine if it should convey the image’s content or function. Very rarely, an image may convey content and serve a function, but generally not both.

If the Image Serves A Function (linked images) 

If the image serves as a hyperlink rather than conveying unique content, alt text should be straightforward and describe the purpose of the image button or the location to which the image hyperlinked.

In the following example, the image takes you to TU’s homepage, therefore, the alt text is simply “Towson University.” There is no need to use words like “website,” “site,” or “homepage” as that will be evident from the manner in which a screen reader recognizes hyperlinks.

Towson University

Function Alt Text Example

This image is hyperlinked to the TU website, so the alt text should describe the page being linked to - in this case, alt text would be “Towson University.”

 

If the Image Conveys Content (non-linked images)

If the image is used to visually convey information, and does not serve as a hyperlink, the alt text should convey the same information that the visual image conveys. Crafting this type of alt text is not as straightforward as crafting alt text for images that facilitate a function. Use these tips for guidance:

  • Do be equivalent and accurate in conveying the content of the image.
  • Do consider the context of your page or document (see the example in the Image Context section for more guidance).
  • Do be succinct. While you want to convey equivalent content to the image, it is important to avoid alt text that goes into excessive detail, conveying more information than the image conveys visually. In most cases, your alt text should just be a few words, though for more complex images, a sentence or two may be appropriate.
  • Do use punctuation and proper sentence structure.
  • Don’t use the words “graphic of,” “image of” or similar phrasing. Screen-reading software knows when it encounters an image and communicates this.
  • Don’t use text within your image if at all avoidable. In some cases, it may be necessary to do. In these cases replicate the text within the image verbatim.

Image Context

What constitutes “good” or “accurate and equivalent” alt text can vary based on the context in which the image is presented. Use your best judgment based on the context of your document or webpage.

Alt text should be modified, depending on the context. For example, here is the same image presented in two different contexts:

Three TU students smiling with their smartphones

Context Example 1

The image appears on the TU homepage under the heading “Explore TU Programs.” Alt text could be “three TU students smiling with their smartphones.” Since it is on a TU site, these are not just young people, but TU students.

Three young adults smiling as they look at their smartphones

Context Example 2

The image is used in a document about social media use among recent high school graduates. Alt text could be “three young adults smiling as they look at their smartphones.” The important info is these are young adults (for example recent high school graduates) using smartphones, not their background or location of study.

The next two images show examples of images that don't require a lot of details. The context of the image can be explained with very little explanation.

Crowd at TU football game

Context Example 3

In this example, appropriate alt text would be “crowd at Towson University football game.” This amount of text is succinct and conveys the same information displayed visually without giving excessive details.

Beverly Tatum

Context Example 4

In this example, a photo of Commencement speaker Beverly Tatum, appropriate alt text would be “Beverly Tatum.” This is succinct and to the point. Details about attire, etc., would be considered excessive.