Descriptive Transcript

Part 1 Exploring Alt Text

When visual content is read or explained in audio, it is not reproduced in the visual column below.

Audio Visual
Exploring alt text. Okay. So what is alt-text? I'm sure you all already know, but it it can be helpful to to look at it a little bit more specifically. So alt text is a kind of image description, but not all image description is alt text, right? So alt text is specifically the description that is included in the code of HTML web pages and it looks like this. So part of the tag is alt equals and then the description will appear in quotation marks. So sometimes it is important that alt text is concise and shorter in ways that other kinds of image description does not need to be, as it's not as important for other types of image description. And so that is one of the things to think about. But all text can be used in conjunction with other kinds of image description. So thinking about it as both image description at large, but also this technical kind of description that's included in the code, can be helpful.

Opening slide & first slide: Alt Text.

alt="person holding long stemmed dandelions gently across their body" displayed with matching image.
For the explanations that I've got for you today and some of the exercises that we'll do later, I've relied pretty heavily on a project called Alt Text as poetry, and I say that because I want to give them credit. Their work is really awesome, but they are They're prioritizing accessibility still as the primary goal of their project, but they're exploring ways in which looking at alt text  poetry can really have interesting effects with the attention to language, poetry's prioritization of word economy, and kind of this experimental spirit, which I think can help make writing alt texts a little bit less of. I don't know, it can be a place for creative expression and not just a chore. And I think that can be beneficial, both for us as alt text writers and also for people who rely on  text. They also mentioned that alt text writing can be seen as a form of translation, which I think is really interesting. In a way, that information is both lost and gained and there's no single correct answer for alt text and it always involves creative choices. So if you're interested in this, I definitely recommend that you seek out that project. I'll share the slides that has all the links in it.

 

Alt text as Poetry is a project to improve alt text and explore it's potential for expression as a secondary goal to an accessible web. 

The information in this presentation relies on their workbook.
So our primary goal when writing alt text is that it should be concise and it should be contextual. You know, depending on what we're trying to accomplish, these things might mean slightly different things, but that's the overarching goal. Concise, contextual.

 

 Concise & Contextual
Wikipedia's style guide offers some questions that we can ask ourselves for writing alt text. So things like, Why is this image here? What information is it presenting? What purpose does it fulfill? Now the AI in PowerPoint will actually auto generate image alt text for you. In this case it generated a dog sitting in a box, which is actually pretty accurate. Now, if I was including this image in maybe an article talking about scent games for dogs, it might be relevant that this is a box full of shredded paper and I'd put kibble in it. And so the dog has finished the scent game, Mordecai, my dog, by the way, and is now sitting in the box. So that might be a relevant detail. It also might be relevant that he is a three legged dog, depending on what context I'm including this image for. Or it might be relevant that he had a little skin condition at the time and had to wear a protective onesie. That is also adorable. So lots of different other information that it might be relevant to include depending on the context that we're using for the image.

 

 Wikipedia Style guide questions and a photo of a three legged dog wearing a onsie sitting in a box.
So for the first exercise that I want to do, I'm going to in just a second, I'm going to go onto the next slide and I'm going to ask you all to do list like a couple five ish objects, people or things that are in the image or related to it and list five ish descriptive words or adjectives. And if you don't mind typing them into the chat box, we'll all hit enter and then we can kind of compare what we've written. And the descriptive words can be things like, you know, how it makes you feel or sort of the mood or the vibe of of the image. So we'll go ahead and do that.

 

 Writing Exercise 1a
So I've still got the instructions here on the left for you. And then here is that image. Okay. Awesome. So I'm definitely seeing we're noticing some some similar things, but some of us are also noticing some things and some people are noticing different ones. We also have different ways of describing some of the same features. Right, which is like saying large building, multi storey building. Both of those things are accurate where someone mentioned or mentioned a stark image, this lone person walking. You know, I kind of noticed that we've got some of the things that are in light. Some of them are in shadow. This is pictures taken about sunset. So that kind of explains that. We've got the nice clear sky. Absolutely. Definitely does look cold. So, you know, having different perspectives can be really helpful and it can even be helpful to think, you know, if this is if this is an image that you took, you may have more information. I took the image. So I know I took it about sunset. I know where it is. But it's also helpful to think about what would somebody who didn't take the image or doesn't have that contextual information know because all text is really not the place to be adding information that's not in the image. It's really to describe what the image is showing. You know, that can change depending on the context. But. All right.

 

 Photo for exercise 1a. trees with many birds sitting in branches in the foreground. Person walks down a footpath. Tall buildings are in the background. A bird flies in the distance in a clear sky.

So for the next exercise, write a description for this image that we've got on the slide here, and we'll take it up in the  and then compare. And I've got a vague timer, so I'll- The the AI described this as a as a pink pig statue. So I got a laugh out of that. Dead eyes. I picked up on that, too. Large rabbit statue with a saddle in a bar. Yeah. I can't get over dead eyes. I love that, Dina. Sorry. Rideable giant bunny. Perfect. I love it. Yeah, absolutely. All right. Thank you all. So the I would say that our descriptions are largely the same, but I definitely think that there is, you know, some things that some of us pulled out, maybe a slightly more important. Again, context is always going to matter and we don't have much here. And but we're definitely like describing, I think, a lot of the same characteristics, you know, the saddle, the fact that it's rideable but in slightly different ways. So that's great.

 Exercise 1b, Photo of a giant jackalope statue in a dim bar.
So that is all I have for you today. But of course, it's not all. All right. So we're going to continue to talk about alt text in the coming weeks and specifically about describing people is next up. But I hope that this was kind of a fun activity to think about alt text both as what we want to be thinking about when we're writing it, you know, keeping it concise, keeping it contextual, but also letting it, like our other artistic practices, kind of evolve. And I think it's okay to let some of our alt text descriptions be a little bit emotional. We know that it's not accurate, like nothing is really completely unbiased or without our personal experiences and emotions. And there's an interesting conversation in the poetry  alt text or alt text is poetry workbook about attributing alt text to an actual alt-text author, which I think is probably not super relevant when we're talking about kind of a one off image description, but could be really interesting if you are writing a guide and then you know, the alt text is an extension of your authorship of that guide, that could be kind of interesting. The one thing that I didn't mention earlier is just that alt text does have some physical limitations. A lot of times when people are listening to it, they almost kind of get stuck listening to the whole thing, which is one of the reasons why we want to keep it concise. And we can also design our our descriptions so that we kind of have an overview first. And then if we do want to include more details, those come after it to kind of give somebody the best chance of understanding what something is. And then if they don't if they don't need that information, they can move on to whatever's next. We didn't talk a lot today about descriptive images, and we will in the future or decorative images and we will in the future because there are some images that don't need alt text if they're described in the in the surrounding content, if they are really, truly just decorative and providing no information to the reader. There are instances when when alt text is not appropriate. So that is what I have for you. Thank you all for participating in those exercises. Does anybody have any questions? Um.

Closing Slide

Part 2 Describing People

Audio Visual
Thank you all for letting me talk to you about alt text again. Today we're specifically going to look at alt text when we are describing people. Opening Slide: Describing People
So as a quick refresh from kind of what we talked about last time, we're still going to be keeping with this idea that we want our alt text to be concise and contextual, but we're going to expand a little bit on what that means. Another thing is that we don't want our alt text to be redundant. So if if information is already presented in the surrounding text, it doesn't need to be presented again in the text. We also want alt text to be equivalent in function, so we don't need to add information to the alt text that somebody couldn't get from looking at the image. Right. So that's that's another kind of tension that's happening there. Now, we don't want to include "picture of" or "image of" at the beginning of alt text, because when a screen reader reads alt text, it's going to say graphic and then read the alt text. So that is redundant. However, including things like "headshot of" can be helpful because a headshot is a specific type of image. When you say "headshot of" That's a really concise way to tell somebody that this is an image probably from about here up of a person. It's probably in a professional context, right? So that's a lot of information packed into two words. So that helps us be concise.

Alt text should:

  • be concise & contextual
  • not be redundant
  • be equivalent in function

do include:

  • "headshot of"

don't include"

  • "picture of"
  • "image of"
I also have a note here about decorative images. So some images are purely decorative and should have what we call null or empty alt text. So the actual tag for that is going to say alt equals and then it'll have those quotation marks and there just will be nothing in them. Some images are unequivocally decorative. I'm talking about maybe a squiggle or a decorative arrow that acts as maybe a completely visual divider between two sections of information. The information is not you know, it's presented in other ways textually, but for visual people, it's it's just a visual enhancement, totally decorative that's always going to have a null all text, right? Sometimes what can make an image decorative can be up to some interpretation. So we're going to talk through that as well. Decorative Images
Some images are purely decorative, and should have null or empty alt text alt=“”
What makes an image decorative is up to some interpretation
This example is from WebAIM's article on writing alt text, which is also really fantastic. I've got it linked in the slides here and, you know, what would we choose as alt text for this image on the slide? Well, we know that we're not going to we're not going to include image of so we can we can rule that one out. The first Hispanic woman to go to space is presenting more information than is in the image. Right. It's not an equivalent piece, so we're not going to use that one. And this is not purely decorative. It's giving us information about the person. So we're going to use astronaut Ellen Ochoa. Now, we can see that she's an astronaut because she's wearing an astronaut suit. So that is not information that's not presented in the image. It is just in a different way. Now, say, for example, you had this caption for the image as the first Hispanic woman to go to space, and later the first Hispanic director of the Johnson Space Center, Ellen Ocha, is widely regarded as a role model. If you had included that caption, there's actually two completely correct ways that you could treat this image. WebAIM actually suggests that you that this is now a decorative image. It's been described in the caption, all the information you might need is there, you can leave this as an empty alt attribute. I think it's also perfectly fine to just include her name, Ellen Ochoa, right. In the all text. That's probably what I would lean towards. It's just if instead of having that blank or null alt text, it gives somebody who's listening to the page an idea, okay, we've got an image here. Moving on. It doesn't slow us down very much and you still have that caption that has a lot more information. So this is where it can kind of be up to interpretation and there's multiple correct ways to treat this image. Slide shows photo of Ellen Ochoa in an orange astronaut suit. Four options for alt text are presented:
  • "Astronaut Ellen Ochoa"
  • "Image of Ellen Ochoa, Astronaut"
  • "Ellen Ochoa, the firs Hispanic woman to go into space"
  • Empty alt attribute (alt="")
Now I want to talk about alt text and identity. So I kind of think of the three statements that we have here on the slides as all being true and also being slightly in tension with each other. So we know that identity is complex, it's very personal, and it's also very important. We also know that identity can't always be determined by what is in an image or how you see someone. And we also know that white people are often assumed to be the default and that that assumption is actively harmful. So when we get into describing people and in the old text, I think it can be helpful to kind of reflect on these three things and how they are in tension with each other or how they might agree with each other. Alt Text and Identity
Identity is complex, personal, and important. Identity can’t always be determined by what is in an image. White people are often assumed to be the default and that assumption is actively harmful.
So for this next exercise, I'm going to pull up an image of a person. I'll give you their name. I'm going to kind of take a couple of deep breaths while the image is on the screen to give you a second to think about it. And I want you to just think about, like, what pops out to you, how you might describe this person. And then I'm going to show you how they describe themselves. Exercise 2a. Think briefly about how you would describe the people in the images on the following slides. We'll then compare with their self descriptions.
So this is Alice Wong. And Alice describes herself as an Asian-American woman wearing a mask over her nose attached to the tube connected to a BiPAP machine. She has medium length black hair and wearing red lipstick. She's wearing a black scarf and jacket, and behind her is a wall with brightly colored street art. So a couple of things that I that stand out to me about Alice's description is she's not including what her disability is. But she also doesn't shy away from describing how it impacts the image. So she describes it. She's got the BiPAP machine and is wearing the the mask to it. And that is a really clear indicator. She's describing what's in the image, but there's other pieces of that identity that maybe haven't come into this description. She also mentions the brightly colored street art. I don't know that it's an art you have to look pretty closely to see. I think that that's the street art behind her because it's the way that the picture is cropped. So we can see that if something is kind of in the image, you can give a little bit more context for it to make it easier to understand what's going on. And you don't have to see like snippets of color behind her. Right. That's a difference in how we might describe that. And I think that can be helpful. Photo of Alice Wong with description.
So this is Emily Ladau. And she describes herself as a white woman with curly brown hair in a ponytail and glasses sitting in a power wheelchair that is partially visible. Her head is slightly tilted. She is smiling and her hands are resting in her lap. She's wearing a maroon sweater with light gray polka dots and dark gray pants. And we can see that these are longer descriptions than we might generally think of alt text as being. But it is really contextual, right? If your if the purpose of the alt text is to describe what somebody looks like, you may want to take a little bit more words in order to do that. And that's okay. Photo of Emily Ladua, with description
So as a kind of a reflection and again, this is from the Alt Text as poetry. You know, when and how do we describe race, gender, disability status, age, class, weight, etc.? A lot of this information about identity can be computed, communicated visually, but it's also filtered through guesswork of ours as to the author's interpretation and our own personal biases. So I think it's important to think about how do we acknowledge visual cues about the expression of identity without making assumptions about how a person identifies? And also, how do we decide what information about a person is important to understanding the image? And like the alt text as poetry folks, I'm not going to offer you a distinct. answer to this question. I think it's a really personal reflection, and I don't know that there's always going to be one right answer. I don't think there will always be one right answer for how to respond sensitively to this kind of challenge. I will say that one of the things that I've done personally after kind of doing this reflection for myself is that I'm very intentional about always, including the fact that I'm a white woman in descriptions of myself, because that's something that I can say. And I think it's important to kind of push back against this assumption that white people's race doesn't need to be described. And that's a choice that I've made for myself. Right. And I think the other piece of this is, you know, it is very often not possible to get people to describe images of themselves. But whenever it is possible, it's super important because we can circumvent some of the struggle by having people describe themselves and choose how they want to be to be described in certain contexts. Reflection When and how do we describe race, gender, disability status, age, class, weight, etc? How do we acknowledge visual cues about the expression of identity without making assumptions about how a person identifies? How do we decide what information about a person is important to understanding the image? Alt text as Poetry

So on that note, exercise b imagine you are describing yourself to a professional acquaintance. Type your description in the chat and then we'll we'll share among ourselves. I'm going to mute myself just so that you don't have to enjoy the clickety clickety of my keyboard but I'm here.

Khyle: Is the professional acquaintance visually impaired? So is that what we're assuming?

Anaya: Yes. Yeah. So you're or say that you are submitting a headshot to a conference and they asked you to write alt text for your headshot for a professional conference.

Katherine: I'm finding this really hard.

Anaya: It gets easier with practice. But yeah, it. It's not something we normally have to do. Right? And some of the you know, some of the things that we use to describe ourselves, like we noticed this last time that we can describe like the same thing in different ways. And some of that, I think, is related to our self-expression as well. Right. Khyle, if you don't mind me picking on you. But I mean, you described your facial hair as a goatee. I probably would have said like a close cropped beard. So that's yours is more accurate because that's how you choose to describe yourself. But it's just one example of things that can be different. And Dina included her mug, you know? I mean, these these are important identity markers. And Lauri included her height, which is one thing that might be really important if we are in person. But I think the more that we have become virtual, the not that it's not important, but I think we forget to include it because all of our heads are the same size. Right.

Lauri: I included it because people tend to comment on it.

Anaya: Yeah. I know a couple of people are still typing.

 Exercise 2b. Imagine you are describing yourself to a professional acquaintance. Type your description into the chat.
Thank you all for participating with me. That is all for today. But that's still not it. I've got a third part for you where we'll talk about charts and diagrams and more kind of complex images. And then I'm sure there is more to alt text after that, but I have limited myself to three chunks of information. You're welcome. Closing slide: Still not all

Part 3 Charts Diagrams and Maps

Audio Visual
Okay. All right. Excellent. Okay. So thank you all for joining me again for talking about writing all text. So today we are looking at alternative text for charts, diagrams and maps. One thing that I wanted to say as we get started is that the guidance that I'm offering you today is specifically for your role as content creators. I just want to recognize starting out that if we were to go into something that somebody else had created and we're trying to remediate it or make it accessible kind of after the fact, some of the approaches that we have would be limited. And so this is we're not really talking about it from that standpoint. We're looking at it from sort of an ideal perspective that I hope is accurate to how most of you will need this information where you have kind of control over being able to insert links to data and things like that. So just kind of a note that there's a whole different side of it out there for that other half. But with that, we can jump in. Title slide
So there's really there's really two pieces that I want you to think about. And all of this is building on everything that we've learned in the past couple of weeks. So we still want to be concise. We want to be contextual. We don't want to be repeating information that's in the context around it. But primarily when we're talking about charts, maps, diagrams, more complex information. We're going to try to do two things. We're going to summarize what's going on in all text. And I've got an example here from Amy Cesal who has a like a medium article that describes one kind of method of doing that. And I like it because, you know, it's kind of a checklist. You click off these three things and you know that you've summarized that item. So the alt text might include the type of chart, the type of data, and then where reason for including the chart. Now, this reason for including the chart is really going to be dependent on context. If you do include this as a caption that's visible to everyone, you don't also need to include it as alt text, if you don't include it in the caption, you'll want to include it in all text. And so an example of what that might look like is a line graph of numbers of bananas sold per day in the last year where the winter months have more banana sales. So this is a little bit longer in terms of alt text, but it's actually pretty short when we're thinking about summarizing a really complex image. Summarize in Alt Text Alt=”chart type of type of data where reason for including chart” (Cesal)
Now the second piece of this pair is then we want to include data or description. So either in the text near the chart, diagram, or map or you know, in a link to it. We want to include and this is in in descending order of preference. So if you have a link to the data that's best, we have an example here at the bottom of the screen: data from the USDA. It's linked. It's very concise. People who want additional information can get it. Perfect. If that's not possible, then you can include an accessible table with the data, and that can either be in a link to another place where you create. If you want to really keep your page streamlined or it can be right in the page, it's up to you. Or a long, detailed description of what is included in that that content. When it's helpful to include a longer description of the data, you'll want to list data points either in descending or ascending order. And doing that helps people who are listening to it create more of a mental map instead of it kind of jumping around. You know, an alternative would be organizing it alphabetically, which is harder to kind of track those numbers.  
So a couple of examples and I'll run through them relatively quickly because it's it's just to show this two part strategy that we're using. So here we have a simple bar chart. It's got two kind of pieces of information across these places or these categories. So the alternative text for this might be bar chart of Canadian teenagers who prefer sports, computer games, music or shopping by gender, where boys prefer sports and shopping. That's one that, depending on the context, that might be accurate, depending on what you are trying to show about this chart. The reason for showing it might be different. Right? And then here is that accessible table that you could include with it to include the information. When I say accessible, you know, I've got tables on the to do list for us to talk about later. But for the purposes of our discussion today, we try to keep tables as simple as possible and we're going to declare that that header.  
Here's an example of a much more complex bar chart where things might get a little dicey, but we're still going to approach that from the same general strategy: summary in the alt text, additional information or the data if possible linked near it in the text. Yeah. All right. Stacked bar chart with the cost of club entry, two longdrinks, a taxi ride, and a Big Mac in select cities around the world where Zurich is the most expensive and Mexico city is the least.
We also might find things like organizational charts. And for this, I would recommend the sort of text alternative of being a nested list. Because in this, we can we can explain the relationships between different cells in the organizational chart to somebody who, you know, visually is not understanding the linking in the organizational chart. We can't put nested links in alt text. So this does have to be a text alternative. Sample organizational chart in a visual map format and as a nested list.
Another example that we'd need a text alternative for something like a flow chart. This is a semi, you know, the not the simplest flowchart I've ever seen, but it's certainly not the most complex. Sample flow chart showing how to choose which program to use to make a flowchart.
And so I, I mocked up what a text alternative might look like for that flowchart. And you can see that for somebody who is sighted, this is not an easier way to access that content, right? It's definitely easier for somebody who navigates using a keyboard and is not sighted because it's going to bring them through. Do you want ease of use? Yes or no? And then you choose that thing and then it will bring you to the next question. So it really is kind of the equivalent experience to using vision to move through that flowchart. But this is one example where certain people are really going to need one, certain people are really going to need another, and they don't you don't go back and forth very well. Text alternative for previous flowchart using html links and landmarks.
And then I've got a couple of examples of maps. So a lot of times in maps, I mean, it's always going to be contextual, just like everything else we've talked about. But we're never trying to tell you every single thing about the map because are alt text would be too long. We'd get really bogged down in details. So this particular example, the alt text might be, you know, a map of the Caribbean region circa . So that that kind of that gives us context for where things might be, where in the world we're looking at. You could include something like including the southeast coast of North America and the northwest coast of Central America, because that tells you where the edges of the map are and what is it kind of included in it. And of course, if you were looking in something more specific about this map, there may be additional contextual information.  
And other ways that we sometimes use maps are by showing what could effectively be a list of items. So this is a map of the British Empire in 1812. But if I were going to include alt text for this, I wouldn't include, you know, descriptions of what the globe looks like or what different continents look like. I would say a map of the British Empire in 1812. And then, if needed, probably in the text next to it, I would want to include the list of countries that were in the British Empire in 1812, so that we are actually identifying the kind of the data points there.  
And finally, we have maps for directions. So this is where that long description comes in handy because we really want to be conveying that same information. And in this case, it's usually best to include something like turn by turn directions. If we are giving turn by turn directions that are based on kind of where we are in the world, we want to be using GPS coordinates instead of cardinal directions because a lot of folks with visual impairments are used to using GPS coordinates based on the map applications that they already use. But the summary for this might be, you know, the 5K route for the Madison Summer Fun Run or whatever it is.  
So that was a lot, and I'm happy to answer any questions if you all have them. But that is the end of our part three of writing alt text. Of course, it can get more complicated than that. But the general kind of rules that we talked about, keeping it concise, keeping it contextual. And then for charts and diagrams, having that summary component and the more information component in your text somewhere is a pretty good rule to get us started with anyway. Closing slide: That’s all…for now. There are plenty of things that can complicate writing alt-text- but I’m here to help!