![[staff profile]](https://www.dreamwidth.org/img/silk/identity/user_staff.png){kind=small}
[tutorial] Writing Alt Text - Answers (and not-answers)
Here are my answers to the Writing Alt Text exercise, and my reasoning for why on each.
You may disagree with me on many or any of the image descriptions! That's okay (and expected). As I said in the talk, many of these questions don't have a single answer, or have multiple possible answers, and people will disagree as to which one is better or best. So if you're worried because your answer isn't close to mine, that's fine: think about your reasoning, consider the basic principles and the desired goal, and work from there.
And, of course, if anybody wants to share their answers because they like theirs better than mine, feel free!
1A: This text comes from the Wikipedia article on cougars, and it's a very basic introduction to "what is a cougar". In that educational context, the purpose of the image is to illustrate to people a few things: what a cougar looks like, how it behaves, etc.
There's a temptation in this case to write an epic description -- something like "A large cat sits on a rock with its paws out in front of it. Its face is long and pointed as it looks off into the distance, and its whiskers and ears are alert. Its fur is thick and tawny, with markings on its forehead and a white bib under its mouth..." That does definitely get the description of the image across! But it's also incredibly verbose, and takes forever to listen to.
So, in this case, I'd go with something concise but descriptive. My answer:
"Cougar sitting on a rock, relaxed but still alert."
1B: This is, of course, way more casual. It's tempting in a situation like this to go for the "joke" alt text -- the author added the image as a visual joke, so there's a real temptation to write the alt text as a punchline, something like "My manager is just off to the right there and the cougar's waiting to eat her" or "My, what big paws you have, Grandma". That's never really a good idea, though: the joke will be inaccessible to anyone other than screenreader users, and it doesn't convey a good sense of what's in the image for the screenreader users.
So, in this case, I'd go with the same as the first: "Cougar sitting on a rock, relaxed but still alert."
There would be an argument for using blank alt text here, since the image isn't adding much to the content. If the author of the text hadn't referenced the image directly ("Not this guy in the pic, but close") I probably would have used blank alt text.
2A: The text comes from Wikipedia's article on falconry, and while the image doesn't necessarily illustrate the text, it's definitely related. So in this case I'd use a fairly technical description. I'm not actually a falconer, so I'm not 100% sure what would be most relevant (but presumably the person writing the alt text if that image was being used in an article on falconry would know which bits of the image were significant).
Still, from what little I do know about falconry, I'd say something like, "Unhooded peregrine falcon on the glove of a man sitting on a public bench" or something like that.
Either way, the concentration is on the falcon -- it's an article about falconry -- and on how the falconer is handling her. The location isn't as important.
2B: Contrary to the last section, this text is all about the location, and about the startling experience of finding a man with a falcon in the middle of the city. So the alt text should, correspondingly, describe the location and setting a bit more. On the other hand, the text itself does a good job of describing some of the location: you don't need to repeat that in the alt text.
For this, I'd use something like: "On a river bench overlooking the Danube, a man and his falcon chill out and enjoy the view."
3A: The text is talking about amber beads found as grave goods in Anglo-Saxon graves; the picture is from a excavation in Ramsgate. (If you click through, it's pretty interesting: the beads were found in the grave of a woman who was buried with a number of "important" grave goods.)
So, since the emphasis of the text is on era, location, and type and number of beads, the alt text on the image should indicate the same, and describe what the observer notices: "16 irregularly-shaped amber beads of high quality." (The temptation is to add "found in a Saxon-era grave", but I'd resist there: that information is available if you click through, and if you put it in the alt text, it not only makes the alt text longer but also gives information to screenreaders that visual browsers don't have.)
3B: The picture in this case is purporting to be something our hypothetical jewelry-designer author picked up at her supplier, and since she's talking primarily about the color and quality of the beads, that's what I'd focus on with the alt text:
"Multiple irregularly-shaped beads of amber, mostly deep orange-yellow shading to red, with striations and inclusions in each."
4A: A librarian friend of mine says she uses this image whenever she's giving a talk about organizing information, to demonstrate that sometimes what makes sense to one person is totally meaningless to others. (Sorting your books by color is something that people are sharply divided over: some people thinks it looks awesome and helps them to find their books more easily, since they can remember what the book looks like much faster than the title or author, and some people think it's a horribly inefficient sorting system that prevents anybody else from finding books.)
In this case, the text is talking about classification systems, but doesn't mention "sort by color" as one of them -- so right now there's not really any connection between the image and the text: the image is there purely to keep the page from being nothing but blocks of text. This is a great candidate for blank alt text, and unless "sort books by color" is one of the organization methods talked about later on the page, that's what my vote goes for.
(What I'd probably do, actually, is caption the picture with something brief -- "Sorting books by color is one hotly-debated categorization system", or some such -- and make the alt text "Books arranged in rainbow order on shelves". But without the caption or some connection to the text, the image doesn't really need to be described: blank alt text is appropriate here, in my opinion.)
4B: The second bit of text, on the other hand, is all about the visuals: our author is complaining about a friend of hers using this organizational method, so we want to get across what the method is. So I'd go into a little more detail:
"Books on shelves, sorted by color and hue of cover and spine into a rainbow, with authors, titles, and subjects intermingled."
5A: I chose this image, and these two bits of text, because it's a good example of the same image having two different meanings in two different contexts. The first bit of text is talking about the object in the photograph -- the red "K6" telephone kiosk -- so the alt text should focus on the object:
"Beat-up red 'K6' telephone kiosk, with soaped-up windows and stickers on the glass."
5B: The second set of text, meanwhile, is talking about the photography itself, and the fact that the image background is in black and white while the kiosk is still in red. So the alt text should reflect that, and since we're talking about artistic technique, talk a bit about why the photographer made that choice:
"The only color is the vivid red telephone kiosk in the center of the photo, which pops out against the black-and-white background of weeds climbing up a wall."
It's a bit long, but it definitely gets across the artistic sensibility and composition of the photo, which is what the text is focusing on.
I told you not to bother with actually writing the text here, because this is a bear of a problem!
It is also the kind of problem that alt text is not suited for. Alt text needs to be fairly concise: it's (usually) being read as part of the flow of the page. And when it comes to web comics, you've usually got a lot of stuff going on: the visuals, the text, the style of the art, etc, etc. (If you were explaining xkcd to someone who'd never seen it before, you'd probably mention the stick-figure art, right?)
So in this case, the solution for making this image accessible is not alt text: it's a transcript. The alt text should be something like, "Comic: transcript and description provided immediately after." Then, underneath the comic, provide a transcript (or a link to the transcript) of the text and a description of the visuals.
(There's a lot of discussion in the web comic world about how to best handle providing alt text -- see, for instance, How Will We Manage the Alt Text.)
There's a "longdesc" property of the <img> tag, and most screen readers support it -- it lets you link to a separate HTML file that contains your transcriptions or your, well, long description. But since it's so rarely used, most people don't know what it is when they encounter it, and it's only accessible to screen readers. Using an on-page transcription or linking to a separate page for transcription means everybody can benefit. (For instance, doing it this way helps people who can see the art fairly well, but need larger text than the comic artist had room to put into the panel!)
There you have it: my answers to the exercise. How'd you do? Disagree with me on anything? Want to talk about the finer nuances of one approach or another? Feel free to ask questions, or discuss the topic further.
(For those not familiar with Dreamwidth: you can post as 'Anonymous', or by logging in with OpenID. If you post anonymously, please sign your comment with a name: it doesn't have to be your wallet name or anything, but a way of referring to you would help!)
You may disagree with me on many or any of the image descriptions! That's okay (and expected). As I said in the talk, many of these questions don't have a single answer, or have multiple possible answers, and people will disagree as to which one is better or best. So if you're worried because your answer isn't close to mine, that's fine: think about your reasoning, consider the basic principles and the desired goal, and work from there.
And, of course, if anybody wants to share their answers because they like theirs better than mine, feel free!
1. Endangered Beauty by digitalART2
1A: This text comes from the Wikipedia article on cougars, and it's a very basic introduction to "what is a cougar". In that educational context, the purpose of the image is to illustrate to people a few things: what a cougar looks like, how it behaves, etc.
There's a temptation in this case to write an epic description -- something like "A large cat sits on a rock with its paws out in front of it. Its face is long and pointed as it looks off into the distance, and its whiskers and ears are alert. Its fur is thick and tawny, with markings on its forehead and a white bib under its mouth..." That does definitely get the description of the image across! But it's also incredibly verbose, and takes forever to listen to.
So, in this case, I'd go with something concise but descriptive. My answer:
"Cougar sitting on a rock, relaxed but still alert."
1B: This is, of course, way more casual. It's tempting in a situation like this to go for the "joke" alt text -- the author added the image as a visual joke, so there's a real temptation to write the alt text as a punchline, something like "My manager is just off to the right there and the cougar's waiting to eat her" or "My, what big paws you have, Grandma". That's never really a good idea, though: the joke will be inaccessible to anyone other than screenreader users, and it doesn't convey a good sense of what's in the image for the screenreader users.
So, in this case, I'd go with the same as the first: "Cougar sitting on a rock, relaxed but still alert."
There would be an argument for using blank alt text here, since the image isn't adding much to the content. If the author of the text hadn't referenced the image directly ("Not this guy in the pic, but close") I probably would have used blank alt text.
2. Unexpected by modernhypatia
2A: The text comes from Wikipedia's article on falconry, and while the image doesn't necessarily illustrate the text, it's definitely related. So in this case I'd use a fairly technical description. I'm not actually a falconer, so I'm not 100% sure what would be most relevant (but presumably the person writing the alt text if that image was being used in an article on falconry would know which bits of the image were significant).
Still, from what little I do know about falconry, I'd say something like, "Unhooded peregrine falcon on the glove of a man sitting on a public bench" or something like that.
Either way, the concentration is on the falcon -- it's an article about falconry -- and on how the falconer is handling her. The location isn't as important.
2B: Contrary to the last section, this text is all about the location, and about the startling experience of finding a man with a falcon in the middle of the city. So the alt text should, correspondingly, describe the location and setting a bit more. On the other hand, the text itself does a good job of describing some of the location: you don't need to repeat that in the alt text.
For this, I'd use something like: "On a river bench overlooking the Danube, a man and his falcon chill out and enjoy the view."
3. Amber Beads by wessexarchaeology
3A: The text is talking about amber beads found as grave goods in Anglo-Saxon graves; the picture is from a excavation in Ramsgate. (If you click through, it's pretty interesting: the beads were found in the grave of a woman who was buried with a number of "important" grave goods.)
So, since the emphasis of the text is on era, location, and type and number of beads, the alt text on the image should indicate the same, and describe what the observer notices: "16 irregularly-shaped amber beads of high quality." (The temptation is to add "found in a Saxon-era grave", but I'd resist there: that information is available if you click through, and if you put it in the alt text, it not only makes the alt text longer but also gives information to screenreaders that visual browsers don't have.)
3B: The picture in this case is purporting to be something our hypothetical jewelry-designer author picked up at her supplier, and since she's talking primarily about the color and quality of the beads, that's what I'd focus on with the alt text:
"Multiple irregularly-shaped beads of amber, mostly deep orange-yellow shading to red, with striations and inclusions in each."
4. Rainbow by onegoodbumblebee
4A: A librarian friend of mine says she uses this image whenever she's giving a talk about organizing information, to demonstrate that sometimes what makes sense to one person is totally meaningless to others. (Sorting your books by color is something that people are sharply divided over: some people thinks it looks awesome and helps them to find their books more easily, since they can remember what the book looks like much faster than the title or author, and some people think it's a horribly inefficient sorting system that prevents anybody else from finding books.)
In this case, the text is talking about classification systems, but doesn't mention "sort by color" as one of them -- so right now there's not really any connection between the image and the text: the image is there purely to keep the page from being nothing but blocks of text. This is a great candidate for blank alt text, and unless "sort books by color" is one of the organization methods talked about later on the page, that's what my vote goes for.
(What I'd probably do, actually, is caption the picture with something brief -- "Sorting books by color is one hotly-debated categorization system", or some such -- and make the alt text "Books arranged in rainbow order on shelves". But without the caption or some connection to the text, the image doesn't really need to be described: blank alt text is appropriate here, in my opinion.)
4B: The second bit of text, on the other hand, is all about the visuals: our author is complaining about a friend of hers using this organizational method, so we want to get across what the method is. So I'd go into a little more detail:
"Books on shelves, sorted by color and hue of cover and spine into a rainbow, with authors, titles, and subjects intermingled."
5. Red Phone Booth by Photomatt28
5A: I chose this image, and these two bits of text, because it's a good example of the same image having two different meanings in two different contexts. The first bit of text is talking about the object in the photograph -- the red "K6" telephone kiosk -- so the alt text should focus on the object:
"Beat-up red 'K6' telephone kiosk, with soaped-up windows and stickers on the glass."
5B: The second set of text, meanwhile, is talking about the photography itself, and the fact that the image background is in black and white while the kiosk is still in red. So the alt text should reflect that, and since we're talking about artistic technique, talk a bit about why the photographer made that choice:
"The only color is the vivid red telephone kiosk in the center of the photo, which pops out against the black-and-white background of weeds climbing up a wall."
It's a bit long, but it definitely gets across the artistic sensibility and composition of the photo, which is what the text is focusing on.
Super Special Bonus Round: XKCD #936, "Password Strength"
I told you not to bother with actually writing the text here, because this is a bear of a problem!
It is also the kind of problem that alt text is not suited for. Alt text needs to be fairly concise: it's (usually) being read as part of the flow of the page. And when it comes to web comics, you've usually got a lot of stuff going on: the visuals, the text, the style of the art, etc, etc. (If you were explaining xkcd to someone who'd never seen it before, you'd probably mention the stick-figure art, right?)
So in this case, the solution for making this image accessible is not alt text: it's a transcript. The alt text should be something like, "Comic: transcript and description provided immediately after." Then, underneath the comic, provide a transcript (or a link to the transcript) of the text and a description of the visuals.
(There's a lot of discussion in the web comic world about how to best handle providing alt text -- see, for instance, How Will We Manage the Alt Text.)
There's a "longdesc" property of the <img> tag, and most screen readers support it -- it lets you link to a separate HTML file that contains your transcriptions or your, well, long description. But since it's so rarely used, most people don't know what it is when they encounter it, and it's only accessible to screen readers. Using an on-page transcription or linking to a separate page for transcription means everybody can benefit. (For instance, doing it this way helps people who can see the art fairly well, but need larger text than the comic artist had room to put into the panel!)
There you have it: my answers to the exercise. How'd you do? Disagree with me on anything? Want to talk about the finer nuances of one approach or another? Feel free to ask questions, or discuss the topic further.
(For those not familiar with Dreamwidth: you can post as 'Anonymous', or by logging in with OpenID. If you post anonymously, please sign your comment with a name: it doesn't have to be your wallet name or anything, but a way of referring to you would help!)