Editor’s Note: Paths to Technology has additional posts on alt text and image descriptions. Here is a post specifically for educators on creating alt text for educational resources: Creating image descriptions (alt text)
How to write an image description
Published in
10 min read
Jul 17, 2020
An image description is a written caption that describes the essential information in an image.
Image descriptions can define photos, graphics, gifs, and video — basically anything containing visual information. Providing descriptions for imagery and video are required as part of WCAG 2.1 (for digital ADA compliance).
It’s sometimes referred to as alt text since the alt attribute is a common place to store them. The alt attribute appears in the HTML code like this:
While alt text and image descriptions are sometimes used synonymously, they’re not actually the same thing. Alt text refers to the text specifically added to the alt attribute, and is often short and brief. Image descriptions can be found in the alt text, caption, or body of the webpage and are often more detailed. For more about alt text and image descriptions, check out @higher_priestess on instagram.
Additionally, image descriptions are a gesture of care and an essential part of accessibility. Without them, content would be completely unavailable to Blind/low vision folks. By writing image descriptions, we show support of cross-disability solidarity and cross-movement solidarity.
How to write a good image description
Something that I learned from talking to Bex is that there is a storytelling aspect to writing descriptions. It doesn’t necessarily make sense to go from left to right describe everything in an image because that might lose the central message or create a disorienting feeling. For that reason, I came up with a framework that I recommend called object-action-context.
The object is the main focus. The action describes what’s happening, usually what the object is doing. The context describes the surrounding environment.
I recommend this format because it keeps the description objective, concise, and descriptive.
It should be objective so that people using the description can form their own opinions about what the image means. It should be concise so that it doesn’t take too long for people to absorb all the content, especially if there are multiple images. And it should be descriptive enough that it describes all the essential aspects of the image.
What counts as “essential” can sometimes be subjective. In my research, some people preferred very brief descriptions while others preferred a great deal of visual detail (like Robin and Bex). My best advice in this area is to be as descriptive as your audience needs. You know your audience and your content best. If your work is highly visual and your audience is interested, then add more detail. If you and your audience care more about the non-visual content, then keep it on the shorter side.
Description: Black Lives Matter sign being held in a crowd.
Object: Black Lives Matter sign
Action: being held
Context: in a crowd
We can add more detail to this description to paint a more vivid picture. In most cases, I recommend adding the detail with the object-action-context format. This makes the description more concise.
A concise way to add detail: A painted Black Lives Matter cardboard sign being held anonymously in a blurred out crowd in front of a stone building.
A redundant way to add detail: Black Lives Matter sign being held in a crowd. Behind them, there is a building made of stone. The crowd is blurred out. The sign is painted on cardboard. The person holding the sign is anonymous.
You can see that the redundant example repeats a lot of words and skips from one thing to another, making it longer and more disorienting. The object-action-context format helps fixate on the primary focus, and then slowly expands to get the full picture.
However, sometimes there is so much detail that adding it will cause one big run-on sentence. In this case, it’s better to keep the first sentence short and in an object-action-context format. This way, people can get a basic understanding and skip through the rest of the details if they want.
Description: A tattooed person holding a sign that says, “Teach your children well,” in a crowd of people. In the middle of the sign, there’s an illustration of the earth with 2 raised fists on either side that have a rainbow pride square background, a trans pride circle background, and brown skin tone stripes on the fists.
Object: person
Action: holding a sign
Context: crowd
To be even more descriptive, you can go into the meaning of the visual imagery. This is where image descriptions are useful to sighted people too because they provide an additional explanation for things that might not be obvious otherwise.
Example of adding meaning: The raised fist is a symbol of solidarity and specifically Black power as popularized by the Black Panther Party in the 1960s. The rainbow pride flag has rainbow stripes and symbolizes general LGBTQ pride. The trans pride flag has pink, blue, and white stripes and celebrates pride for the trans and gender non-conforming umbrella.
This is obviously a longer commitment and might not be necessary if you have written other content in a surrounding article, or if you’d rather reserve your energy from explaining and encourage people to look it up themselves. And obviously, if you choose to explain symbolism, then make sure to do the proper research.
How context impacts the description
(April 2021 update)
Digital images don’t just exist in a vacuum, they have surrounding context on whatever app or website they are found on. We often come across images when we read news articles, scroll through our friends’ social media, go online shopping, etc.
Description: dog sitting in a field of autumn leaves
For an image on a news article, that description works reasonably well. It’s objective, concise, and descriptive while also quite brief. However, if the photo is on a dog breeder website that has images of several different breeds of dogs, it doesn’t actually communicate much useful information (especially if every description just says “dog”). For that reason, I’d include the breed and more visual descriptions of the dog.
Dog breeder website description: light brown pitbull dog breed with a black nose and short, pointed ears
If I am an artist who took the photo of the dog and want to showcase my skills and evoke some emotion, I’d probably want to add more detailed descriptions. This is of course subjective based on the type of artist I am and how I want the audience to receive my work.
Artist’s website description: a photo of a light brown dog with short ears and a pink tongue sticking out, sitting in a field of autumn leaves. The dog is in focus while the sunlight reflects off the light orange and yellow leaves, fading into the background.
If the image is on a site or app with several hundred images, perhaps for an animal science textbook or a flashcards app, then it’s better to optimize for quick and easy scanning of content. Perhaps “dog in field” or even just “dog” will suffice in that context.
This section is new and very much in progress. If you have additional thoughts about how context impacts image descriptions, feel free to reach out! (Contact info at the bottom.)
What is alt text? What is an image description?
Alt text and image descriptions are text-based descriptions of visual details in an image written primarily for people who are visually impaired (inclusive of blind/low vision). If an image fails to load on a website, alt text will be displayed in its place, and alt text is also used for search engine optimization.
Image descriptions are similar to alt text descriptions that are used by screen readers to recognize images, though there are a few key differences between alt text and image descriptions:
Location
Alt text is typically attached to an image metadata or added in the “alt text” box on social media. Image descriptions may be in the image caption, in a text post, or shared in a text link for extended descriptions.
Visibility
Alt text is usually only visible to screen readers, which read the alt text out loud or display it on a braille display. Image descriptions are “exposed” and can be read by anyone. Twitter is one social media platform that allows users to read alt text whether they have a screen reader or not by selecting the ALT button on an image or gif that has alt text included.
Length of text
A picture is worth a thousand words, but there may only be room for a thousand characters! Alt text is typically limited to 100-250 characters, though most best practice guides recommend keeping alt text to around 125 characters. Image descriptions can be the same length or even longer, since they are included in the photo caption, in a text post, or text link. I usually recommend people keep basic descriptions at around 280 characters, or the length of a tweet/Twitter post.
Here are the policies for alt text on popular social media platforms, copied from my post on How To Add Alt Text on Social Media.
- Twitter supports alt text up to 1,000 characters, though alt text cannot be added or edited after an image or gif is posted.
- Instagram supports alt text up to 100 characters, and alt text can be added or edited after a picture is posted.
- Facebook supports alt text up to 100 characters, and alt text can be added or edited after a picture is posted.
- Tumblr supports alt text up to 200 characters, and alt text cannot be added or edited after a picture or gif is posted.
- Pinterest supports alt text up to 500 characters, and alt text can be added to static/image or video pins after they are posted.
Level of detail
Image descriptions tend to go more in-depth about visual details than alt text due to the larger character limit. For example, alt text might tell a user there is a puddle on the floor, but an image description might go into further detail and say there is a puddle of orange juice on a white tiled kitchen floor.
Related links
- How To Add Alt Text On Social Media
- Seven Myths About Alt Text
- How To Create Helpful Visual Descriptions For Visually Impaired Audiences
- My Thoughts On Visual Descriptions With Low Vision
What is a screen reader?
A screen reader, sometimes referred to as text-to-speech, is a form of assistive technology that allows blind/low vision to read digital information. If an image does not have alt text, it will likely be ignored by the screen reader, making it difficult or impossible for the user to know what is in an image.
Some users do not use screen readers full-time and instead use “on demand” screen readers that are activated by a gesture, shortcut, or by pressing a button on their phone. These tools may be referred to as select-to-speak, read aloud, speak text, or similar and are only used to read text or alt text. This is how I use screen reader tools as a user with low vision- I enable them when I need them on my device.
Another option for accessing screen reader output is to connect the device to a refreshable braille display, which will display alt text, emoji names, and other text-based content in braille. Refreshable braille displays vary in size, though the most common models display 40 characters at a time, with some displays supporting up to 70 or 80.
Related links
- A to Z of Assistive Technology For Low Vision
- How To Use Select to Speak on Android
- Assistive Technology For Fluctuating Eyesight
What about automatic alt text?
Automatic alt text is an awesome technology that can provide transcriptions of text and basic details about an image, but should be used more as a starting point than as a finished description, as the algorithm is far from perfect- one example I frequently use is that automatic alt text identified a photo of my brother standing on the driveway as a picture of a car, and also once identified a herd of elephants I saw at the zoo as a group of gorillas. Still, there are a few apps that can help users identify what is in an image, and use this as a starting point for writing a description- one of my favorite apps for this is Microsoft’s Seeing AI and Google Lens.
Related links
- Recognizing Images With Seeing AI
- How I Use Google Assistant While Traveling
- How To Access Images Without Alt Text
