Skip to content

Alt Text and Accessibility

Alternative text ("alt text") is a way to describe visual content for users who cannot see an image (because of vision impairment, or because images are not displayed).


Top Takeaways: Alt Text

If nothing else, remember the following:

  • Alt text provides an alternative way to access the content provided by an image.
  • In T4, the Description field is used as the alt text of an image.

Alt Text Basics

At the most basic level, alt text is a written description of an image. When an individual cannot see or access the visual content of an image, alt text provides a way to understand its meaning.

Importance of Alt Text

Alt text is most often relied on when an individual:

  • Has a vision impairment (low vision, blindness, etc.) and uses assistive technology that reads the content of a page
  • Has images turned off or not displayed (because of user preference, security concerns, device limitations, bandwidth or data limitations, etc.)

Alt Text in Action

The example below shows a page containing an image (left) and what that same page looks like with images turned off (right). In this example, even if you can't see the image, knowing that the alt text describes it as "The Cardinal mascot giving two thumbs up!" gives you a pretty good sense of what is being shown.

Alt text describes the content of an image when it can't be seen or displayed, as is shown in this side by side comparison of two web pages, one displaying an image and one displaying the image's alt text.

Alt text describes the content of an image when it can't be seen or displayed, as is shown in this side by side comparison of two web pages, one displaying an image and one displaying the image's alt text.


Alt Text Dos and Don'ts

Do

  • Summarize the image in a neutral, informative way
  • Use short, but descriptive language
  • Keep context in mind
  • Use proper grammar, spelling, and punctuation

(Generally) Don't

  • Start with "image of…" or "graphic showing…"
  • Use descriptors such as race, gender, or emotions
  • Use acronyms or symbols (including quote marks)

Alt Text Examples

Consider the three numbered images below.

Three numbered images for the purposes of alt text discussion below.

Image #1

Possible Alt Text

A smiling student holds a hand-lettered Welcome Home Cardinals sign.

Additional Considerations

If an image contains meaningful text, your alt text should include that text. However, avoid using quotation marks when indicating text as this will have unintended consequences! In the example above, if the alt text was set to A smiling student holds a hand-lettered "Welcome Home Cardinals" sign, the alt text would end up as A smiling student holds a hand-lettered (the opening quotation mark for Welcome Home Cardinals acts as an unexpected end to the alt text).

When a description of the student is relevant, stick to observable features such as "smiling" rather than inferred emotions such as "happy."

Image #2

Possible Alt Text

Professor Jonathan Millen uses skeletal bones to teach anatomy to a small group of students.

Additional Considerations

Depending on where and how this image is used, it may or may not be relevant to include the following information in your alt text: the name of the professor, the small number of students, the lab environment, the type of subject being taught, etc.

Image #3

Possible Alt Text

An archival image of female students linking arms to walk down the steps of Kearney Hall.

Additional Considerations

While gender is not usually relevant for alt text, this photo is often used when discussing the history of women at Fisher. In this case, the gender of the students adds meaning to the image and should be included in the alt text.

If you have any questions about writing alt text, contact jbenedict@sjfc.edu. I will help you!


Alt Text in T4

In T4, alt text is set by the Description field of an image in the Media Library, as shown below. Every image uploaded to the Media Library should have alt text!

The Description field is used to populate the alt text of an image.

The Description field is used to populate the alt text of an image.