Image Accessibility: Alt Text vs Image Descriptions
Image description: On a Wikipedia article that’s being edited, a pop-up window prompts the user “Add missing image alt text? The previous image is missing alt text. Add descriptions to images for visually impaired readers?” The user can choose Add or Do not add at the bottom of the pop-up.
Understanding image accessibility
As a learning designer, maybe you know you should add alt text to your images. Maybe you also know you should write an image description in the image caption. But did you know that what you write in your alt text and image description should probably not be the same?
Alt text and image descriptions are two different accessibility measures with different purposes.
Check out the infographic below to see how they compare.
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.
Image description: A teal and orange infographic titled “Alt Text vs Image Descriptions.” The infographic is organized into two columns for alt text and image descriptions. They are compared across the following categories: purpose; used by; length; when to use; location; guidelines; and examples. For full text of the infographic, keep reading below.
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.
Final thoughts
When used correctly, alt text and image descriptions work together to provide users with a more complete understanding of an image. They are important to a wide variety of users for a wide variety of reasons.
If you’re creating online content that includes images, don’t neglect these important accessibility measures. And if you already have, it’s not too late! Make sure everyone can access what you want to share.
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. Bela Gaytán. 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/