Image accessibility: Alt text vs. image descriptions
Intro
At a webinar I recently attended, “Inclusive Accessibility: Beyond Colors and Captions” hosted by Eduflow Academy, speaker Bela Gaytan offered a big overview of some lesser-known accessibility measures we should be aware of in learning design.
One of my biggest takeaways from that session was the differences between alt text and image descriptions. As I learned from Bela, these are two different accessibility measures with different functions and purposes.
While she was talking, in my head I was already imagining the comparison below, so today I share it with you!
A note that I am following image description best practices here: since I’m offering an infographic (aka image) with text, I’m also providing a text-only version of the same information below to make it accessible to screen readers.
Alt Text
Purpose
IDENTIFY image content
Used by
Folks with visual disabilities
Folks with limited internet access (images won’t load)
Length
100-140 characters (often a hard limit for screen readers)
When to use
Informative images
Functional images (icons, buttons)
(Not needed for decorative images)
Location
Attached to image itself using code
Guidelines
Avoid saying “image of” or similar (screen reader knows to interpret code as alt text)
Use context of text to inform alt text (see Example 4 on W3 guidelines)
Image Descriptions
Purpose
DESCRIBE/ CONTEXTUALIZE image content
Used by
Folks with visual disabilities
Folks with cognitive disabilities
Length
A few sentences
When to use
Informative images
Functional images (icons, buttons)
(Not needed for decorative images)
Location
Appears directly above or below image
Guidelines
On a new line, use the heading “Image description” to introduce
Bela Gaytan recommends describing colors, emotional context of image subjects
Alex Chen recommends using the framework object-action-context
Use your judgment about whether to include info on subjects’ race, gender (there is currently some disagreement about what is best practice here)
Examples
Image, alt text, and image description courtesy of Disabled and Here under CC license
Alt text: Cupcake deck party
Image description: A South Asian person in a wheelchair brings mini cupcakes out on a platter to four other excited disabled people of color. They are all sitting around a rooftop deck.
Conclusion
This was just a quick comparison of alt text and image descriptions, but there are SO many great sources available to learn more.
Ready to do a deeper dive? Check out the references and recommending learning section below.
References and Recommended Learning
Alternative text and image description. SeeWriteHear. (2020, August 11). Retrieved March 17, 2023, from https://www.seewritehear.com/learn/alt-text-and-image-description/
Becker, B. (2022, September 22). Image alt text: What it is, how to write it, and why it matters to Seo. HubSpot Blog. Retrieved March 17, 2023, from https://blog.hubspot.com/marketing/image-alt-text
Chen, A. (2020, July 17). How to write an image description. Medium. Retrieved March 17, 2023, from https://uxdesign.cc/how-to-write-an-image-description-2f30d3bf5546
Cohen-Rottenberg, R. (2015, July 8). We need your help: Specifying race and gender in image descriptions. The Body Is Not An Apology. Retrieved March 17, 2023, from https://thebodyisnotanapology.com/magazine/we-need-your-help-specifying-race-and-gender-in-image-descriptions/
Eduflow. (2023). Inclusive Accessibility: Beyond Colors and Captions. YouTube. Retrieved March 17, 2023, from https://www.youtube.com/watch?v=USqTblStY-M&ab_channel=Eduflow
WAI. (n.d.). Images tutorial. W3C. Retrieved March 17, 2023, from https://www.w3.org/WAI/tutorials/images/