All About Image Descriptions
TL;DR- A post all about writing image descriptions on Tumblr.
Introduction Text
So, I’ve been looking around for a master post on how to make image descriptions, and have had no luck. So, I’ve decided to put everything I -have- learned in one place.
Why are image descriptions important?
To start off, image descriptions are important because they make Tumblr more accessible. People who use screen readers need them because they can’t see, or it’s hard to see, images, gifs, videos, etc. Image descriptions are also important for people with slow internet speeds, or people who are on mobile Tumblr. They are needed on Tumblr because the way this site is coded doesn’t allow for the normal way that screen readers read descriptions. (I won’t go into that because it’s confusing and technical.)
What are image descriptions and how do you make them?
Image descriptions are plain text (Generally, text you can copy and paste) descriptions of images, gifs, videos, and other media. On Tumblr, there are several kinds of image descriptions.
The first describes a picture without words. This kind of description goes in brackets [ ] and tells about what is in a picture or gif. Image descriptions should start with the words “Image Description,” to indicate what it is, especially for those using screen readers. Image descriptions need to be the first comment to a picture. If you are adding a description to a picture that already has comments, just use the return key to add a few more spaces. Image descriptions must be first, or else people using screen readers will have to be read meaningless dialogue first without knowing what the comments refer to.
For example:
This is a picture of me. An image description for this picture might go something like:
[Image Description: A picture of a person sitting on a brown couch. The image is cut off at their chest. They are looking straight at the camera, and are smiling slightly. Their hair is brown and asymmetrical and falls to the right side of their face. They are wearing glasses and a white tank top with a ruffled edge. Behind them is the back of the couch. On top of the couch is a long, light brown pillow with dark brown jagged patterns on it. Behind the couch is a white wall and the edge of a windowsill.]
How descriptive you are will depend on how much time (And spoons) you have.
Notice that I could have included more detail, such as my eye color, my freckles, or the color of my skin. (A note about skin color and image descriptions, you either need to use it all the time, or in posts where race is the main subject.)
In general, I like to bold text in brackets. This is because it helps it stand out to people who aren’t using screen readers. Organizing your image description so that people who -can- see it, can read it, is another part of accessibility.
The second kind of image description involves both text, and pictures. This can occur in several different ways. The main ones are simple pictures or gifs with a few words on them (This includes pictures with subtitles, and ones that have words in the background), comics, and infographics. The way you caption each of these is slightly different.
For pictures and gifs with words, you would start out with a normal image description that would also include a “with text that reads…” somewhere in it.
For example:
source
[Image Description: A black and white gif of Emily Osment in the film Cyberbully. She is standing on the right side of the screen. She, and the person on the left side of the screen, are facing each other. Her hair is either short, or pulled back into a ponytail, and appears blonde.She is wearing a short sleeve shirt with flowers down the front. Her left bra strap is showing and she has a bag over her right shoulder. Her words are subtitled at the bottom of the image, saying, “You should know that your words actually hurt.”]
I also have the tendency to italicize quotes to make them stand out from the rest of the image description.
As you can see here, the image description comes first with what is being said at the end. This is almost always true for captioned pictures. Regarding gifs, especially longer ones, what is being said would be put between the description of the actions shown in the gif.
For example:
source
[Image Description: A slightly blurry gif of comedian Bo Burnham making a visual pun. He is wearing a short sleeve gray shirt with a light gray object on it. He is sitting on a green couch. Behind him is a white wallpaper with green birds on it. Captioned under him in yellow says “My puns aren’t just bad…” He pulls up a white piece of paper that says ‘My puns’ on it. He rips the paper, smiling through the tear as he says “They’re tear-able”]
So that’s how captioning works when a gif is longer. But how do you write a description when two people are talking?
Like so:
source
[Image Description: Two people as simple light gray silhouettes on a light blue and tan wavy background. One person is reaching out toward the other and is captioned saying “Let me help you!” and the other replies “Thank you.”]
The more complicated the picture, the more you have to combine these elements. But, usually, pictures and gifs don’t contain more than a few lines, which helps to keep image descriptions small.
So that’s how you do single images and gifs. But what about comics, which have lots of words with their pictures, or infographs which are word heavy pictures with lots of smaller charts, diagrams and other images?
For comics, especially longer ones with lots of background and dialogue will probably be structured exactly like image descriptions for other pictures with dialogue, but with one thing added in. New paragraphs. This will help space out who is saying what, and what is in each panel so that people reading the description can understand it better.
For example:
source
[Image Description: A black and white three panel comic. There is a robot with one, black eyes stands to the right of a man wearing a tee shirt, pants, and a hat. Behind them is a white background with part of it shaded gray using pixels. The robot introduces the man,
Robot, pointing to Chad: “This is my roommate Chad”
Chad, waving: “Hi there.”
Robot, making a thumbs up: “He’s a cartoonist and the best buddy a robot lie me could ask for.”
Chad smiles and holds his hands on his hips.
Chad, frowning and looking down at the Robot: “By the way, your part of the rent is due.”
Robot, looking annoyed: “He’s also slightly annoying.”]
For more complicated comics, or at least ones that change their view, perspective, etc, the new setting also should be described.
For example:
source
[Image Description: A person sitting in front of a desk for an interview. They have short brown hair and are wearing a tie. The person behind the desk is wearing glasses and is holding a paper. The person behind the desk, presumably a manager, asks the other person, an applicant for a job position a question.
Manager, holding onto the edge of their glasses in one hand, and a paper with the other: “Mr.Idangam, please describe yourself at the present moment.”
The next panel zooms in on the applicant’s face.
Applicant, smiling with eyes closed: “I am a man who is describing himself at the present moment.”
The panel under that focuses on the manager’s face.
Manager, taking their glasses off: “Welcome aboard!”
The door of the office is show open. Above the door is a sign that reads ‘Grelling & Nelson Incorporated.’ The applicant and the manager are shaking hands across the desk.]
The easiest way to put in a change of setting is to describe it immediately before the dialogue in that scene.
When it comes to infographs, which are mostly text but in an image, you can briefly describe what the infographic is about, and any images near the top or it. Do not use the image description to put down the text in the infographic. Infographs are text heavy, and they need more spaces and specialization then just the image description. You can use bullet points, bolding, and italics to make the text more organized. Then, if there are any other images in the text, they can be described in small image descriptions.
For example:
source
[Image Description: An infograph about what happens in an internet minute. There is a clock in the upper left corner with boxes coming out of it. Each box has the name of a website, and each is tagged with a fact about the website.]
In a minute on the internet here’s what happens:
639,800 Gigabites of global IP data are transferred
135 botnet infections occur
6 new Wikipedia articles are published
20 new victims of identity theft occur
204 million emails are sent
1,300 new mobile users come online
47,000 apps are downloaded
$83,000 in sales are collected
61,141 hours of music are played
100+ new Linkedin accounts are created
20 million photos are viewed on Flickr
3,000 photos are uploaded to Flickr
320+ new Twitter accounts are created
100,000 new tweets are sent
277,000 people log into Facebook
6 million Facebook profiles are viewed
2 + million searches are made on Google
30 hours of video are uploaded to Youtube
1.3 million videos are viewed on Youtube
And future growth is staggering:
Today the number of networked devices are equal to the population [A picture of a black stick figure standing on the planet with the symbol for wireless coming out of their head. The symbol is five curved, yellow lines.]
By 2015, the number of networked devices will be double the population. [The previous picture now has two wireless symbols coming out of their head, and a 2X over them.]
In 2015, it would take you five years [A red arrow with the word ‘IP’ on it is shown linking up this information to the next] to view all video crossing IP networks each second.
So that’s what an infographic might look like with an image description.
When it comes to videos, you would probably approach it similarly to an infographic or a longer gif. It would be similar to a longer gif in that there would be a brief description first, and the the dialogue would be under that, with the scenes and actions also described. However, the dialogue of the video would not be in the image description. Instead, it would be outside of it, like the information in an infographic.
Like so:
[Video description: A video of a cat that visits the person who is taping the video. The cat’s name is VeeSee, or Visitor cat. The cat is gray and and brown, with the brown striped slightly on their body. The cat’s tail is long and their eyes appear green. In the video the person taping follows the cat into the kitchen.]
Video Taper: “Mreow, mreow”
[VeeSee meows back and then turns around from the camera and begins to walk into the kitchen. The video taper follows VeeSee as they brush up against a chair in the kitchen and walk to a door leading out of the house.]
Video Taper: “Mreow.”
[VeeSee meows as they rub against a cabinet.]
Video Taper: “Mreow. VeeSee, tss tss. Visitor cat, pff pff.”
[VeeSee looks back at the camera and meows.]
Video Taper: “Mreow.”
[VeeSee meows in response and walks towards the camera. The video taper meows at VeeSee as they walk to a waterbowl]
Video Taper: “Mreow…Mreow…Mreow.”
[VeeSee meows back and sniffs the water bowl.]
Video Taper: “Mreow… D’aww, it looks like he’s preoccupied.”
[VeeSee drinks some water.]
When it comes to audio posts, if you can usually find lyrics or transcripts online. If you can’t, but you’ve got the spoons, you can always write your own.
A few helpful hints:
Sometimes transcripts will be available for popular videos or newscasts
Check the source for information that will be helpful in writing an image description.
So this is everything I’ve learned about writing image descriptions! I hope you’ve enjoyed.
Love this post. Showed it to a friend on twitter who uses screenreaders, they said “ if everyone described images like that poster did, the internet would be a richer place, but they don’t.” Please signal boost.
