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 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.
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.
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!
