What is the Difference Between Alternative Text, Long Description, and Caption?
by Deborah Edwards-Oñoro published on
When it comes to adding images on the web, you need to consider how to make them accessible and understandable to everyone.
Which means you need to include text alternatives to describe the image information or function.
Three options are:
- Alternative Text
- Long description
- Caption
But how do you know which one to use? And when? Here's info to help you make that decision.
Alternative Text
Alternative text is a concise image text alternative for screen reader users. It's not shown to sighted users unless the image doesn't load.
Which can happen when someone has turned off images on their email application. Or they're using a slow connection.
<img src="flickr.svg" alt="Flickr">Long Description
Long descriptions are longer text alternatives for complex images, which are shown to both sighted and screen reader users.
An expand/collapse accordion below an image is one example of a long description. Another example is a text description below the image.
Note: don't confuse the longdesc attribute with long description. Longdesc is a deprecated/obsolete and should no longer be used. It doesn't work on VoiceOver or mobile screen readers.
<img src="remote-workforce-infographic.jpg" alt="The Benefits of a Remote Workforce infographic with text description below">
<p>Text Version</p>Caption
An image caption is visible to all users and typically displays below the image.
It's used to convey additional information about the image; it doesn't describe the image directly.
Image captions are optional and should never be the same as alternative text.
<figure role="figure" aria-labelledby="figcaption">
<img src="detroit-parade-clown.jpg" alt="Clown with bright red hair and multicolored costume hands out purple bead necklace to young child">
<figcaption>Detroit Thanksgiving Day Parade 2022</figcaption>
</figure>Thanks to Paul Adams for helping me learn the differences between alternative text, long desciption, and caption.
Additional Resources
About Deborah Edwards-Oñoro
Deborah Edwards-Oñoro is a web designer and user experience professional who works to make it easier for people to use the web. Over the years she's been a meetup organizer and leader for Refresh Detroit, Metro Detroit WordPress, Michigan User Experience Professionals, and Detroit User Experience. In her free time, you'll find her birding, taking photos, gardening, and reading. Find more articles by Deborah on the Lireo Designs blog and follow @redcrew on Mastodon
Lireo Designs blog: lireo.com/blo
redcrew on Mastodon: @redcrew@mstdn.social