Transcript: What is alternative text? How do I write it for images, charts, and graphs?
Introduction
Matthew Deeprose: Hello everyone, and as Julia said happy Global Accessibility Awareness Day.
So, what is alternative text, and how do we write it for images, charts, and graphs? That's our topic for today. The first half is about images in general, and then I'm going to cover charts and graphs after a question break. This presentation is part of our forthcoming "Accessibility in under 10 minutes" series, where we're going to give very short presentations about lots of different aspects of accessibility, to try to make it seem a bit less intimidating, and just focus on one part [at a time].
What is alternative text? Who does it benefit?
You may also hear alternative text shortened to "alt text". It's the written description of an image that we write for those who do not see it, helping them to get the intended meaning of that image.
This might be those with visual impairments who use a screen reader, which is an assistive technology that speaks aloud what's on screen. Alternative text benefits those who personalise their learning experience using blackboard's alternative formats such as the audio version. That's where you could download your presentation or handout as an mp3 file and have it play to you on your phone or in your car, whatever.
Since these became available last July, more than 14,000 of our students have generated alternative formats. Those who listen to content rely on alternative text being provided for images, otherwise they'll miss out on important details.
Alt text also appears when an image link is broken, or users have turned off images. Those on pay-as-you-go internet may disable images on web pages in order to save bandwidth or data costs. If alt text has been added they won't miss out.
When we don't add alternative text to images, we're creating a barrier for those who don't see them. You could liken it to censoring content from those people.
Where and how do we add alt text?
We're likely to add alt text in documents, presentations, and websites. Both Blackboard and Office can alert you to missing alternative text so we can fix it. And if images are going to be used just for visual interest, then I can mark them as decorative.
So, to add alternative text we usually select an image and use the alt text button. It gives us a box in which to write our description and an optional check box to mark the image as decorative if it's only used to provide visual interest.
What should we consider when we write alt text?
When we write alt text, we should consider the context in which we use the image, our intended audience, and the functional purpose of that image.
Another way to think about how to write alt text is what would be lost if the reader could not see an image? What would we say to fill in that gap? Or how would we explain the image over the phone to someone who does not see it?
Worked examples, part 1
To show you what we mean we're going to cover this using three worked examples.
Example 1: Photograph of the Bargate
Our first example is a photograph of Southampton's Bargate. This is a famous point of interest in Southampton city centre. In the photo is an old historic building, looking a little incongruous in front of its urban background, on a clear sunlit day.
Our context is we'll use this photo in a tourist brochure aimed at the general public as an example of an historic landmark in Southampton. The alternative text I chose is "The Bargate is a medieval gatehouse in the city centre of Southampton". I think this is all that's needed within this context, considering the audience and function.
I did not say "Photo of the Bargate", usually we don't need to describe the format unless it's important to the context, audience or function. I didn't describe the weather, or the background. I didn't detail other aspects of the Bargate as those are not necessary for this context.
If I was using this image in an article about English medieval gate houses, then I may give more detail. Here I've used "Southampton Bargate. Constructed in 12th Century of stone and flint with arrow slit windows." I'm not a historian myself so this description is just my idea of a more detailed alternative text which I imagine may give historians more appropriate information within this imaginary context. What would they immediately see when they look at this picture which someone who could not see it might miss out?
Alternative text should be written by subject matter experts, this is especially so where the context and audience will also be subject matter experts, or those studying in that area.
Example 2: A stock photo of two people shaking hands
The next example is a stock photo of two white people shaking hands. While we only see their hands and forearms, they appear to be men wearing business attire over 40 years of age.
The context is an article about negotiation skills, aimed at staff.
The image provides no value other than visual interest it's just showing people making an agreement, that we infer from that image, but it's not giving us any detailed information and so we will mark it as a decorative image. This means it will be ignored by screen readers and the audio alternative format in Blackboard.
Alternatively, if I were writing an article about the lack of diversity in stock photo services and using this image as an example then I might add alt text describing the ethnicity, gender, and attire we infer from the image.
Example 3: Process of photosynthesis diagram
Our third example is a simple diagram of the process of photosynthesis aimed at school children.
With diagram descriptions we start with the title, then consider the basic structure of the image and what's important. The colours are not important, nor are the clouds or the texture of the earth or how many roots are shown. We do not need to describe the arrows themselves as being "black arrows".
The alternative text I have chosen is "Process of Photosynthesis..." So, there I've added the title... "A plant, growing out from earth is at the centre. The sun is in the sky and is labelled "Light energy". The plant takes in water through its roots, carbon dioxide and sunlight through its leaves. The leaves release oxygen into the air and generate sugars as part of the process."
This alternative text is quite long. If the original article already described this process, I would mark the image as decorative and use a caption to describe the essential content, which may only be the title of the image.
Captions and alternative text
What's the difference between captions and alternative text? Captions give a general idea of what the image is about, but they do not describe it in detail. They might include an image attribution or a title. Alternative text, as we have demonstrated, describes exactly what can be seen in an image based on its context, audience, and function.
This image and caption are taken from a University news article, "beating blindness". The image shows a man in medical attire using some kind of apparatus to examine the eyes of a woman whose back is turned to us.
The caption, taken from the actual news article is, "Having an impact on patients' lives in the clinic."
Unfortunately, the alternative text was the same as the caption. I reached out to Professor Andrew Lotery, who was featured in the original article, to help write alternative text for this image, which is "A doctor examines a patient's eyes using a slit lamp ophthalmoscope." Again, this shows it takes subject matter expertise to write accurate alternative text.
Summary
Keep in mind that writing alternative text is a form of creative writing. Everyone's going to do it a bit differently, as long as you are conveying information that is relevant and in context then you're going to be on the right track.
To write accurate alternative text you need subject matter expertise.
We usually find it more efficient to write alternative text as we go, rather than adding it all at the end when it may be missed.
We covered quite simple images so far. There are techniques for more complex images like charts and graphs that we will cover in a moment.
Devin Valentine, a Learning Support Advisor at the University of Southampton, says "I have had students and friends say that the inclusion of alternative text on pictures has helped them feel included and also to trust the tutors that they are prepared to put effort in to make their materials more accessible, which in turn helps them feel confident to ask for help in the future... "
Questions and answers
So, before we look at charts and graphs, please raise your hand in the chat and we'll come to you if you have any questions.
Gil over to you.
A better way to write alternative text for the photosynthesis diagram
Gil Dekel: Thank you. Can you share against example number three from your slide? I can't actually remember what it is, but I remember my question. Yes, it was about the photosynthesis. If I look here on the light energy, the yellow and then I go back to alternative text, it says the sun is in the sky and is labelled light energy. So, in the alternative text, it says the sun is in the sky and it's labelled light energy. And that's my question. Here we are describing the label in yellow of the image that is actually not relevant to alternative text and I wonder if it actually confuses the user because it adds information which they don't need. They don't need to know that it is labeled light energy in the image. Am I correct?
Matthew Deeprose: Yeah, I suppose you could say... you could change it to "the sun is sending light energy", or "the plant is receiving light energy from the sun".
So again, because it's a..., what I'm finding is because you've got a... because like I said, there's a process of kind of creative writing. That you're always... everyone's going to have a slightly different approach. I quite like your idea there. I should be focusing on the plant. It's receiving light energy. But when I wrote it, I was kind of thinking that there's the plant and the other important object is the sun, which is labelled as light energy. But I think you've illustrated nicely some of the subtleties with writing alt text. I don't think you can ever say "this is the perfect example", but I think you've helped me to make it better, so I might go back and think about that and see if I can improve it in the future, but does that help?
Gil Dekel: Yes... That's great. Thank you.
Matthew Deeprose: All right, cool thanks! Did someone else have a have a question? Anyone else have a question? Let's just to have a quick look in the chat.
The process of adding alt text
"So, how do we actually add this alt text to the images?"
So as an example, if I go and if I create a new PowerPoint file, and let's say I go to a new slide, this might not be an appropriate image but here's an image of a cat. In PowerPoint, I can select this image and you see the picture format tab along the top? I can select alt text and then I could write some alternative text.
Now, I don't know what the context, audience and so on would be. If this article was about lazing around at home, it's probably not about cats lazing around at home so I would probably mark this as decorative if it's about like... "the comforts of home", something like that.
But if it was actually about how cats like to take the best seat in the house and make it their own and then and take up as much space as they want to on it, then I might write that a cat is sitting in what looks like an armchair and is stretched out filling up as much space as it can, looking quite content. So, I might use that as my alternative text.
Now I'll be sharing this link later but you can set up in office... this is quite small, but at the bottom here it says, "accessibility investigate". Here it's already telling me that I'm missing some alternative text and it's giving me the option to add a description or mark it as decorative.
So, hopefully Wendy that helps answer your question.
Over to you Alice and then I'll continue looking at anything in the chat.
Alternative text for documentation screenshots
Alice Harris: Oh hi! A lot of my screenshots are of something that's reinforcing something that I've already described in text. I try to make it so that the image isn't explaining anything new. So, from what you've said that... because I've kind of wondered what how much alt text is needed for something that's not adding anything to the text, if that makes sense, but and I think from what you've said maybe I don't need to put a huge amount of alt text because that image isn't adding anything particularly in addition to what's already written down? Have you ever wondered like, how much do I need because some of the texts that I might write would almost be repeating what I've actually explained in the steps.
Matthew Deeprose: Brilliant question Alice! I happen to already have something here that I can show you so let me see. I'll put in a great page, I think this is from Penn State University. I'll put this in the chat here.
So, here I've got a screenshot with text that says, "Tick the boxes as shown here", and I've got some generic alternative text that isn't appropriate because I can't... no one's going to know if they can't see the image what those steps are.
So, here I think in fact here I might even change this [generic alt text] now to decorative. I would say [in the body text] "tick the following options". Then I would set out what those options were and then I may or may not add in "do not tick the other options". If I've said, "tick these", I might say "tick these options only to do this process", then as long as what I have in the text describes everything that's necessary then the image is just there as additional content. If the image were not shown, I could still follow those steps. So, in my opinion we should be writing the text as much as possible that we don't need the images, but we can add the images as that visual interest or to help make it easier for those who can see the images, but for those who can't they're not going to be missing out on that content.
I think Jon might have put up a something I'm not sure if he had something to say relevant to that particular point or that was a different point.
Does that answer your question for now Alice?
Alice Harris: Yeah, I think so. So, just put decorative then in those cases.
Matthew Deeprose: That's right. As long as you've got the steps explained in the text as clearly as possible then the image is just for addition, and you can mark it as decorative. I do like having those images of course, so it's not a reason not to include them, but you can mark them as decorative as long as the text is clear.
Adding alt text with older versions of Office
Thanks to Jon [Lightfoot] for pointing out that if you have an older version of office you might need to right click the image and select edit alt text and that's just to show that with office products, there's always more than one way to do it. So, here I've right clicked on the image, and I've gone to edit alt text.
Alternative text for charts and graphs
What about charts and graphs? Charts and graphs can be complex. How much we write depends upon the context in which we use them, and this actually refers back to something that we've been discussing about those screenshots as well.
How much do we need to write?
If I'm using the image for visual interest, then we'll mark it as decorative.
If the chart or graph replicates text already in the document, then we should: add a caption describing the essential content and context and use the alt text feature to mark the image as decorative.
If the chart or graph supports or rationalises what's in the text, we should write a brief alt text describing essentials of the image and use a caption or title.
Most importantly, if the chart or graph goes further than what's in the text, or I want students to use this graph, chart or diagram in some way, then I should write a brief alternative text describing the essentials, add a caption, and then provide a full description elsewhere in the document - not in the alt text but in the document and ideally I should provide the tabular data that we used to generate that graph or chart. Full descriptions can be useful for everyone, as we will discover shortly.
Worked examples, part 2
We're going to use three worked examples, there's many other types of chart and graph so if you would like us to cover other types in a future session please let me know and we'll see what we can do.
For each we're going to look at the full description, a short alternative text, and a caption in order to give you the full range of techniques regardless of the context and the usage that we described earlier.
Example 1 - a fairly complex line graph
Our first example is a line graph, plotted against the Standard Red Green Blue (sRGB) spectrum. It shows how the cones in our eyes detect different shades of colour and is from an article about colour blindness.
When we write full descriptions of graphs we start with the title, then describe how the graph is constructed, then give a summary or overview of what it shows us and provide the data in tabular form. Remember, the full description is not the alt text, the full description goes somewhere in your document.
Here's my example full description. The title is straightforward, we should always say what type of graph it is, so we have "Line graph representing normalised response spectra of human cones, to monochromatic spectral stimuli, with wavelength given in nanometres using Stockman and Sharpe (2000) 2 degree cone fundamental plotted against sRGB spectrum".
The construction of the image is what many miss out. Here we explain the three lines, the labels of the vertical and horizontal axes, and how colour is used in the background, mapping where colours start and end to the nanometres marked on the horizontal axis.
So, in this case I have used: "There are three lines on this graph, one for each of long (L), middle (M), and short-wavelength (S) cone signals. The vertical axis is labelled "normalised cone response, linear energy" and the horizontal axis is labelled "Wavelength, nanometres". The area of the graph is filled in with the standard red green blue colour spectrum, from left to right starting at black, changing to blue around 450 nanometres, to green at 525 nanometres, and red at 625 nanometres, ending in black at 680 nanometres."
For the overview I describe each line on the graph, where it starts, it's maximum point, and where it ends, referencing points on both axes. I describe the shape of the distribution and what shades of colour are filled within the shape.
For example, for the S line I have:
"The short-wavelength, S cone starts at 390 nanometres at zero energy, reaches maximum energy at 440 nanometres and approaches zero energy at about 530 nanometres. Its distribution shape is slightly skewed positive and predominantly covers the blue spectrum light".
I added "Description ends" at the very end so that those listening to the description will be aware.
I won't go through the other parts, but you can do that, because I've shared the slides earlier, if you wish.
You might already realise that this type of description is likely to benefit more people that just those unable to see the graph. It may suit those with neurodiverse attributes or who prefer different learning preferences. It also helps people like me who struggle sometimes with complex graphs. This gives you an idea of the amount of effort it was for me to write this!
Providing the data in a table is always useful. We will cover accessibility tips for data tables in a future session. This data is vital if we would be asking students to answer questions about the graph.
For the caption I've written the title of the graph. "Normalised response spectra of human cones, to monochromatic spectral stimuli, with wavelength given in nanometres using Stockman and Sharpe (2000) 2 degree cone fundamental plotted against sRGB spectrum."
If I decided only a short alternative text was necessary, because this supports information already provided in the text, I would describe that it's a line graph, what the three lines are, and what colours they map to, since in my opinion, this is most important information shared by this graph.
Example 2: A Venn diagram
Next, we have a Venn diagram, showing the Biospsychosocial Model of Health and how each aspect covers different topics.
When describing Venn diagrams we should focus on the data, not on how it looks, providing the data in brief statements. If a summary is immediately apparent, we can give that too.
If I was using this image to support information already in the document, I would use a short alternative text, starting with what type of chart it is, a Venn diagram and describing what it does, so I have "A Venn diagram visualises the biopsychosocial model of health." For the caption I'm using "the Biopsychosocial model."
For a full or long description, I start with the title, "The biopsychosocial model of health."
Then I describe the construction of the image, there's three circles, these are the labels, that each circle and their intersections or interactions contain examples, and then introduce my description sharing that I'm covering the contents in a clockwise direction.
So, I have "The Venn diagram is formed from 3 circles. The 3 circles are labelled Biological, Psychological, and Social. Each circle and the interactions between the circles contain examples. The diagram develops as follows, in a clockwise direction."
As the full description continues, I explain each circle and what it solely contains first. I've also used a structured ordered list to give semantic information to screen readers.
For example
- Circle 1. Biological. The biological circle contains 3 examples, as follows.
- Physical health.
- Disability.
- Genetic vulnerabilities.
I won't take the time to read this all out because you can download this slide deck and go through it yourself.
Then I describe each of the intersections, where the circles overlap, and their contents. State that there are four intersections - again explaining the structure, and then giving the examples.
For example:
The four intersections between the three circles are as follows.
- Biological and Psychological. This intersection includes two examples, as follows.
- Temperament.
- I Q.
Example 3: A flow chart or decision tree
Now we're looking at a flow chart, or decision tree.
I'm using a simple flow chart helping people who find kittens know what to do.
We can convert the flow chart into a linear list, giving possible next steps. We should state the construction, that it's a flow chart and the number of actions. I don't need to describe what the lines look like, but I do need to describe the labels, in this case, yes and no.
The pictures of the kittens are nice, but they're only used for decorative purposes, I don't need to describe them.
So, my full description starts with the title. I then cover the construction of the image, that the decision tree features 7 main boxes and 3 decision points.
Then I cover the steps, if it has a decision point then I use "If yes go to Box X, If no go to box Y"
For example: "1. Box 1. Do you see a mother cat in the area? If Yes, go to Box 2. If No, go to Box 3."
My caption would be "What to do if you find kittens".
If I were to use short alternative text it would be "Flow chart: I found kittens... now what?"
Summary... again.
Again, keep in mind that writing alternative text is a form of creative writing. As long as you are conveying information that is relevant and in context then you're on the right track.
To write accurate alternative text you need subject matter expertise.
We usually find it more efficient to write alternative text as we go, rather than adding it all at the end when it may be missed.
As we've discovered, writing alternative text for charts and graphs gives us more to do. The basic concept to remember is title, construction, overview, data.
So, what next?
What next? Review the charts and graphs and images you've used recently. If you had added alternative text would you change it following this session? You're welcome to raise examples from your work when we get to the questions and answers.
If you haven't already, follow our guide for turning on the accessibility checker in Office so that you are alerted to accessibility issues while creating a resource. For more tips on alternative text and exercises in how to write it check out the online "POET" tool. We'll paste all the links at the end of this session. Why not talk to your colleagues about their techniques and practices with writing alternative text? You can Book an "accessibility one to one" with Digital Learning about accessibility. Join us for future sessions to learn more accessibility tips.
Thanks
I couldn't have done this presentation without the help of Diagram Centre who created the POET tool and numerous other resources on alternative text. We had a lot of help from Huw Alexander from the textBox group who are alt text specialists. Professor Andrew Lotery gave us help with writing alt text for an image, and the presentation was produced by the Digital Learning team.
Final reflections
So, I'm going to stop sharing and you can raise your hands or type questions in the chat and I'm about to paste those links for you as well thanks for listening.
Are there any questions to go through in the chat Julia?
Julia Reardon: I don't know, I don't think so. Jonathan and Irene have been sort of adding extra little bits to your information there. I don't think there's any other questions there. I always find your talks really interesting. I always then go back and visit my old text and try again.
I do actually put alt text on all of my PowerPoint presentations you'll be pleased to know but they're probably not very good. I do try though, I mean at least I try, so I'm sure that's true for a lot of people. It's definitely one to keep coming back to. I think it's one of those things you get better at doing it, don't you?
Matthew Deeprose: That's right and I've learned a lot just putting this presentation together and an awful lot more. We did a really big presentation a year ago about alternative text. I've learned so much more, particularly about describing complex images here. I really like the idea of using those full descriptions because I know I find a lot of those complex graphs difficult myself and to have that written full description can really help me to understand what's actually happening in a graph. I think it's also a good learning exercise for students to write descriptions of these graphs so that they can express them really well because, of course, communication is a really important part of sharing research and other information. So, you need to be need to build that confidence that you can share that information as well. I mean it's very useful because I think you forget sometimes what you're trying to convey etcetera.
Julia Reardon: Yes, there's a lot to think about there. Thank you so much Matt. For those who want, the slides are in our files section, so you can look at them there and obviously take them in a little bit slower. So yes, thanks for that Matt.