[Presenter] Welcome to Making the Future Accessible: Adding Alt Text to Images and Gifs. Before we begin, I would like to go over the image on the front slide of our presentation. In the image, a blind black woman uses an accessible navigation app on her phone, which vibrates as she reaches her airport terminal. The woman wears glasses and pulls a suitcase with her right hand. She is following a path paved with tactile tiles. In the background, a customer service person sits at the terminal kiosk and an airplane apron is visible through large windows. The source of this image is "Disabled and Here."
In today's training, we will go over the following topics: Who uses alt text? What is alt text? Examples of good alt text. Examples of bad alt text. When things get too complex for alt text. How to add alt text to an image. And finally, how do I develop my alt text skills?
So, who uses alt text? The primary audience for alt text are the blind, deafblind, and low vision communities. They can access the alt text, either via a screen reader, which reads the content on the page to them, or a braille device. In addition, the epilepsy and vestibular disorder communities will use alt text for gifs, aka animations, as they will have gifs shut off due to content that may trigger seizures, migraines, or vertigo. Finally, the neurodivergent community may use alt text for gifs and shut off auto playing gifs to avoid distractions.
What is alt text? Alt text describes the image in context based on what details the image adds to the text around it. So if we have a paragraph of content around a recipe, and the image to the right is the finished recipe -- the meal -- we would describe the meal being displayed in that image. Alt text also keeps the description short and concise. It's roughly 140 characters or less. And alt text does not use the words "image of" in the alt text, as it is already taken care of by inserting the image into the image file field. Adding "image of" at the beginning means a screen reader will read image of image of, creating redundant content.
Let's go over a couple of examples of good alt text. The first example we are providing is a simple image with alt text. The image alt text is a black and white painting of an indigenous woman with long dark hair and intense eyes. She has deep bags under her eyes. A blood red hand is imprinted across her mouth, cheeks, and chin. This image goes along with an exhibit that is on missing and murdered indigenous women. In the image itself, the alt text describes the overall visuals in that image, and importantly, the alt text includes the ethnicity of the person. It also evokes emotion by indicating the deep bags under the eyes and the imprinted blood red hand across her face.
Example 2. We have alt text from multiple panels in a short comic strip. I do want to note that it's a short comic strip with only about 4 lines of content and simple visuals. And so that allows us to provide that information in a short amount of alt text. If this was a more complex cartoon or comic strip, we would want to break these panels into separate images before posting them and provide alt text for each image.
So let's go over the example alt text that was written by the comic strip creator, ADHD Bri. Alt text: Four panel comic. Panel 1 shows the main character staring down. The caption says, "I wish I could go back in time." Panel 2 shows the main character staring down at a younger version of themselves. The caption says, "So I could find my younger self." Panel 3 shows the main character hugging their childhood self, while they say, "I'm here for you." Panel 4 shows the childhood self hugging the main character back while crying. The caption says, "I guess I'll have to settle for my inner child."
So what this alt text does well is it describes the actions within the scene, the hugging, the looking down, the crying. In doing so, it conveys emotion, and again, the comic is simple, so it allows us to convey that information in a short amount of alt text.
So what are examples of bad alt text? Bad alt text usually puts no effort into describing the visual. It's quick to accomplish -- just getting alt text in there for compliance, which is what we don't want to do. And so the first example I have here is one word alt text. In this example, a photo posted to a website only has the following alt text: "Person." It is on a page with a series of images of people giving different hand gestures. All images on the page have the same alt text - "Person." The overall sense of fun and excitement conveyed by the photos along with the diverse ethnicities displayed across the page are lost to anyone unable to see the visuals. A better example of alt text for the image I have enclosed here is, "A medium-skinned woman cocks her head to the side with a smile, and points straight ahead. She wears a doctor's coat and the stethoscope. This, then, conveys the emotion or the fun that she's trying to provide. It also provides that she's wearing a doctor's coat and a stethoscope, so she's in the medical field. That is all lost by just having, "Person," as the alt text for this image.
This is on an educational site, encouraging people to sign up for classes, and so without -- for the blind, deafblind, and low vision community -- without that alt text, it doesn't convey the -- even the diversity of the jobs of the folks displayed on the page.
A second example of alt text that is bad is a 2 word description for a featured quote. And so, in this case, we have a young woman named Emma Kennedy, who's writing about the nature of bilingual education and it provides two examples of what she says in her writing within the image. However, the image description is just, "Emma Kennedy."
So what's left out? Here are the two quotes left out of the alt text completely -- "What's in a name: A discussion of the nature of bilingual education in the United States" - Emma Kennedy. "Despite a general consensus that language education is essential, there is quite a lot of disagreement about who should receive what instruction, and how it should be given."
So the central part to remember here is now anyone from the blind, deafblind, or low vision community that is using assistive technology to read this image has lost the examples of Emma's writing. So again, we want to always provide context that is missing by the image. And again, this could also be an example of when to not use an image, and to convey this in another way. But again, the big thing is, if you're going to add an image, don't leave out the context of that image.
So what happens when things get too complex for alt text? In example one of complex images, I have an event poster with complex information. And what is being delivered here is multiple blocks of content. We have a heading of Black History Month Speaker 2023. We then have the focus of the topic which is apologizing for Boston's role in the transatlantic slave trade. A case study in restorative justice and policy action. Then we have the speaker's image. We have the speaker's name, the speaker's title -- they are the Boston City Counselor - District 7. Then we have a huge paragraph of content about the actual speaker. And then an abstract about the event that is another huge paragraph. This is finished off by various elements of content, including the date and time of the event, and the location of the event, as well as a click here to register now link, which is part of the image and cannot be clicked.
And so all of this is too much content to convey via alt text, because alt texts is -- would be one long run on sentence. We can not put bullets in there. We can not put headings in there. We can not put the links into alt text. And so this alt text would be a cognitive overload experience and not valuable to the person using assistive technology.
So what will be the correct approach? The correct approach would be to point to an event web page with all event details semantically structured with headings, alt text for the actual image of the presenter. There's another image in there as well. Actual links for the click here to register information, and any other valuable structure that we can provide to that event web page. You could then -- because this is a social media post in this example, you could then still have an image teaser with the speaker's photo and the date and time of the event to pull folks in visually, and have that alt text within the image on social media -- that brief, short alt text. It also would be helpful to just include the date and time in the original social media post as well. So things to think about.
What is the best way to deliver content and what vehicle are you doing it on? There is no way within the social media alt text to convey all of this. There's no way to do so if you were sending this flyer as an embed in email. Always look to provide content that should not be in an image as actual content -- text as actual content -- and avoid putting it into an image.
Let's look at example 2, complex graphs and charts. So this was seen a lot with Covid -- there were a lot of complex graphs and charts during Covid that were made into images. And again as we just talked about -- 140 characters of alt text. With no structure, no ability to provide bulleted lists, no ability to provide headings, that information is going to be impossible to convey via alt text if you have -- in this case -- I have a first quarter visitors to example.com websites. And there is site 1, site 2, site 3 -- and all of those sites then have data within those for each month of that quarter. And so this again -- cognitive overload -- not going to be able to grasp all that data in alt text.
So the best example -- there's 2 options. So if you are putting this into, let's say, a document that's going to be an annual report, instead of embedding that within the alt text of the image, expose it as a detailed description right on the page -- this will benefit not only the blind, deafblind, and low vision communities, but also the neurodivergent community. This is seen a lot in textbooks too -- printed out textbooks, textbooks that can be read via audio online -- where all of that description is below the graph.
And also we have option 2, which is, if you are displaying it on the web, use an accessible data visualization tool that will render the data semantically to assistive technology -- where I can actually -- it's not an image. It's actually HTML and CSS -- and I can navigate that content and I can navigate each data point. Those data visualization tools do exist. And we do use them here at UMass, and that would be Highcharts on Massachusetts.edu and UMassp.edu.
So how do I add alt text to an image? So we know alt text is important. And we know now, okay, it's got to be about 140 characters. Let's keep it succinct. But let's not leave out any of the important information. So how do we add it? And that really depends on the product. All products have "how to" instructions on adding alt text, including Drupal, which we use for Umassp.edu and Massachusetts.edu. Mailchimp, which we use for email campaigns. Microsoft applications, such as Excel, Outlook, Powerpoint, and Word. We can put alt texts on Salesforce knowledge articles, onto Salesforce cases. We can add alt text to Slack and various social media platforms. And I'm going to be including a resource document right underneath this video, where you can get links to popular product articles on how to add alt text. But if one isn't there, just Google, "how to add alt text to..." and include the product name at the end. For example, "how to add alt text to Facebook," and the related article should pop up to the top of the Google search.
So the last topic we are going to discuss today -- How can I develop my alt text skills? And really the answer is practice regularly. As with any skill, whether learning to ride a bike, learning how to garden, etc. -- the best way to improve your skill is to practice it regularly. So with alt text, you are going want to --as you are using images in documents, emails, posting images to slack, add that alt text to that image to continually improve upon how you write alt text. The great thing about Slack is that the alt text actually appears as an alt text visual tag that you can click on, or anyone within slack can click on and see what the alt text is for that image. So not only can you practice in Slack, but when you add alt text to an image you are also raising awareness of alt text at the same time.
So again, it really comes down to practicing regularly. You can also do this on social media and for everything that you post and learn as you go. It is a skill, so it takes time to learn and to improve upon.
I'd like to thank you for attending this course, and if you have any questions you can reach out to me. My name is Kristina England, kengland@umassp.edu. I am the digital accessibility specialist for the President's Office and I'm happy to assist you in any way I can. Thank you. Bye.