Weekend: How to Add Alt Text to Images on Every Social Media Platform

0:02 This is [music] Double Tap Weekend. In-depth interviews, accessible tech. Here's Steven Scott and Sean Priest. [music] Hey everybody, welcome along to another episode of Double Tap Weekend with me, Steven [music] Scott. No Shan Priest and not me either today because I'm going to hand over to our good friend Allison Sheridan from the Nozzilla cast today to share with you her tips on adding alt tags on social media. This was done as part of her work with Screencasts Online, a video tutorial subscription service all about using Mac and iOS apps. Now, this tutorial was such an important public service that the owner of Screencasts Online, Lee Garrett, chose to make it publicly available.

0:48 Now, it is a video, so uh you will hear Allison refer to things on screen, but I think following along with this, you will get a really good handle on the importance of alt text and where you can use it and how. So, Allison, over to you. [music] Hi, this is Allison Sheridan and welcome to another edition of Screencast Online. This week I'm going to teach you about a really cool feature of sharing photos on social media and that's how to make them accessible to the blind. The method is to add to your images text that describes what's interesting or funny or compelling about the photo you're sharing. This text goes by many names. Sometimes you'll see it called alt tags. you'll see it called alt text or

1:35 alternative text. Sometimes they're simply called captions. Mostly you'll hear alt text or alternative text. So I'm going to try to stick to that lingo for this tutorial. Before we learn how to add alt text or images, I'll show you what the experience is like for someone using voice over without all text on an image and then with all text on the same image. On the iPhone, you can see I'm running Slack and I'm in a demo channel in Slack for my podcast. You can see that there are two posts with the same image of the sphere in Las Vegas looking like a huge furry pink animal. On the first post, I don't have any alt text, but I do have a little post written above it. On the second one, I did put in alt text, and you can tell there's alt text because in the

2:20 bottom lefthand corner, it says alt. I'm going to triple click the side button on my iPhone, and that'll turn on voice over. Now, I've preconfigured this accessibility shortcut in system settings to launch voice over, and that'll allow me to turn it on and off when we need it. As soon as I enable voice over, it will begin to read to me, and I'll slide my finger down the screen until I'm over that first image. It'll read that first post, and then it'll look at the first image and try to read me any information it can find about it. >> Voice over on Slack back button. Pod feet 11:19 p.m. The attached image has no alt text. G_0769 JPEG image button actions available. As you can hear, voice over only read

3:05 the name of the file, which was img_0769. Now, that doesn't tell the user anything at all about the image, and that's a terrible experience for our blind friends. Now, I'll drag my finger down to the next post so you can hear the difference with alt text. Podfeat January 8th at 1:21 p.m. This image does have alt text. A giant dome rising above the city. The dome is a pink furry animal with huge eyeballs. The sphere is dramatically against a jet black sky and has the city lights and traffic in front of it. It's playful and scary at the same time. Image button actions available. Now you can hear how much richer of an experience that is for the screen reader user. Wouldn't that be more fun for you if you couldn't see to be able to understand that it's a big furry monster in this giant dome? I think that's more fun. With social

3:52 media, we share images because we want to entertain and inform. And why not make it as accessible to as many people as possible. People often talk about how they want more followers. Well, why would you cut out a whole bunch of the community just by not giving people descriptions of your photos? Now that you're sold on the idea of adding alt text, we'll go through a few of the prominent social media apps, and I'll show you how to add it in each one. Each one has different nuances, a different method to get to the alt text, but after you learn a few of them, you'll be able to hunt down the right buttons to push in whatever application you're using. I'll disable voice over before the next segment so you don't have to listen to me and voice over at the same time. >> Voice over off. >> Since we're already in Slack, let's

4:39 start with adding all text to an image. right here. I'll tap on the plus button at the bottom left to add a new photo to a new post. This brings up the photo picker and I'll choose this picture of an Einstein bobblehead. To add the alt text, we need to tap on the image. In the bottom right, you'll see a three dot menu. The last option above delete says add description. While we only get a tiny field in which we can type, we do get a nice explanation of what the description is, and they even call it alt text. They explain it helps people with visual impairments to understand what you're sharing. Remember, we want to explain what's fun or interesting about this image. I'm not

5:25 a fan of typing on a tiny iPhone screen, so I'm going to simply dictate my description by tapping the microphone in the bottom right of the keyboard. a 6-in tall bobblehead of Albert Einstein. Period. He has his wild hair, and he's wearing a red cardigan. Period. He's holding a piece of chalk in his left hand and a tiny chalkboard in his right hand on which he has written his famous equation E= MC². I had to tap the microphone again to get it to stop listening to me. And I'll tap save. At this point, it's not obvious that anything has changed. And oddly, we

6:10 have to X out of this screen rather than save. I won't bother to add a message. I'll just hit the green send button. You can now see the little alt button on the image showing us that it worked. Let me pull down here a little bit. And I can tap on the alt button and it takes us right back to where we were. So we can choose the three dot menu again. And now you can see it's changed to say edit description. When I go in there, you can see that we have our alt text still there. I'll tap cancel and I'll tap the X. Now let's enable voice over again so we can listen to the alt text description. >> Voice over on pod feet. 8:57 p.m. a 6-in tall bobblehead of Albert Einstein. He

6:56 has his wild hair and he's wearing a red cardigan. He's holding a piece of chalk in his left hand and a tiny chalkboard in his right hand on which he has written his famous equation E= MC² image button actions a voice over. And you can see how easy that was to simply dictate a natural sounding sentence in as the alt text. and I give it a lot more flavor than if it was just called Albert Einstein, for example. That's all you have to do to add alt text in Slack. Next, let's take a look at how we can add alt text to our images in Facebook. I'll tap on where it says write something to start a new post. Just like you normally would, I'll select photo/ video and I'll choose this silhouette of

7:43 a surfer down at the beach. Facebook has started adding autogenerated alt text, which is better than just reading out the name of an image file from the camera if someone forgot to do alt text. But we can do better. I'll post the image without adding any alt text to my image. Now it's uploading the image right now. And if I select the image in the top right, you see a three dot menu. And we can get down to alt text, the second to the last of our options. It says, "Maybe an image of one person, twilight, and monument." Well, like I said, nice try, but let's make this much more interesting. I like to think for a minute about how to convey the feeling of the image. It's not just that it's a

8:29 surfer that really matters. This was taken during one of the California wildfires, which is why there's a dramatic sunset. The surfer is also a memorial statue. I'll dictate my alt text by tapping on override generated alt text. The foreground is a silhouette of a surfer taking a big wave. Period. The surfer is a memorial statue recognizing lifeguard Tim Kelly. Period. The background is a vibrant sunset going from dark red at the top with bands of orange and yellow. Period. The image is dramatic on its own, but even more so because the sunset was the result of the California wildfires in 2016. Period. You'll notice that now it says that all

9:15 text is usually less than 100 characters. I don't know who made that rule at Facebook, but that's not a normal restriction at all. In fact, that's very, very short. I tried saving it anyway, and I found that all of my alt text was simply ignored and voice over reads nothing at all on the image. 100 characters can even begin to convey what this image feels like. I'll show it to you. And let me do a select all here. And I'll cut that. And I'm going to dictate what is actually 100 characters. Silhouette of a memorial surfer statue against red/ orange sunset caused by California wildfires. That's all that fits in 100 characters. You must agree that this isn't even

10:01 close to enough. But let's tap done. And now I'll tap post and wait for the image to upload. And now let's turn on voice over and hear what we hear. >> Voice over on. Allison Sheridan profile picture. Allison Sheridan admin just now. Public group. More options. Photo. Silhouette of a memorial surfer statue against red/or sunset caused by California wildfires. React. Comment. Copy. Link. Share. Voice over off. Well, that's a little bit disappointing, but technically you can add alt text to your images in Facebook. Where Facebook at least makes it easy to find the button to add alt text images,

10:48 its sister company, Instagram, buries the option very deep in the menus. I'll use the plus button at the bottom to add a new image. It automatically chooses the latest image in my recent photos, which is this blue-footed booby from the Gopagos. I'll tap next in the upper right and then I have to tap next to get past the filters. We still can't see alt text. I'll scroll to the bottom and you can see it says advanced settings. And now finally at the bottom of that menu I can write my alt text. It didn't take long to get there, but it was hard to find. I'll dictate a description of this image. A blue-footed booby from the Gopagos. Period. This bird has turquoise blue feet and is looking over its left

11:35 shoulder with a kind of wild look because of the white rings around its eyes. It's standing in sand with some brown brush behind it. Okay, so far it let me keep the whole message. Let's tap done. And I don't get any feedback. I'll tap the back button. And finally, I'll tap share. Now the image posted and I'll turn on voice over. Voice over on photo by Podfeat. A blue-footed booby from the Gopagos. This bird has turquoise blue feet and is looking over its left shoulder with a kind of wild look because of the white brings around its eyes. It's standing in sand with some brown brush behind it. Image voice over off. You can hear that it read the entire alt text which was far more than

12:22 100 characters. So, Instagram doesn't have that silly restriction. Instagram buries the option to add all text, but at least it actually lets you write enough text to convey the feeling of the image. I'm a huge fan of Mastadon. So, let's take a look at how alt text works in the web interface for Mastadon. In Safari, I've navigated to my instance for Mastadon chaos.social. Let's add an image with all text here. I'll tap on new post at the top right. In the new post window, there's the familiar paper clip to add an attachment. I'll select photo library and I'm going to select this photo of the penguin. Before I tap add, note at the bottom it says that location is included. Since this was also shot in

13:08 the Gopagos, I'm okay with that. But if I was posting a picture near my home, I could tap on options in the lower left there. And then I could choose to turn off location and look at the other options within this page. and then tap done. I'll tap add in the upper right and add the selected image. Once it is uploaded, you'll see that Mastadon is very helpfully alerting me to the fact that I have not written a description for the image. I really like that they surfaced this information to let you know that you really do want to do that. When I tap on that alert that says no description added, it brings up the window where I can enter my alt text. Like the other sites, it explains that this is for people who are blind or have low vision. So far, this has been

13:54 the easiest way to add all text of any of the services. There's even an option to detect text from the picture, and that would be handy if it was a picture, say, of a road sign or even a short document. Also note that Masttodon is telling me that I have 1,500 characters into which I can fit my alt text. Another sign that Facebook is just wrong about 100 characters. We don't want to be too verbose, but we know 100 is just silly. I'll enter the alt text using dictation. A goalpost penguin paddling on the surface of the ocean. Period. The photo is taken from underneath by someone who is snorkeling. Period. The blue sky and clouds are showing through the water, and the background reflects more of a green from underwater. Now

14:40 that my description is complete, I'll tap done above the keyboard. And while we're on this alt text page, we can also drag a circle around on the image, which sets the portion of the image that will always be in view in the thumbnails. I'll move that onto the penguin's head. And you know what? This has nothing to do with alt text cuz obviously it's visual, but it's still a cool feature. I'll tap the apply button in the bottom left. Now I'm back in the post, and you can see that the warning about a lack of description has disappeared. I think you have the idea on hearing voice over read the alt text. So, I won't keep demonstrating that it worked. Now, I've been using voice over on iOS to demonstrate what the blind person hears for all text, but it's really important to know that these alternative text descriptions are available to

15:27 Windows, Android, Linux, and even Chromebook screen readers as well. Of the social media services I've used, Mastadon has more people writing all text on their images than any of the other applications. The dedicated apps for Mastadon and the web interface seem to surface all text as something normal to do and I think that helps normalize this as a best practice. Before we work with any more services, I want to show you a method that surprisingly does not work to add alt tags. I'm going to swipe up to get out of Safari here and I'll open up Apple Photos. Let's just choose the penguin photo again. And what you would think might work would be to start with a share sheet and then choosing an application to share. Let's say for example,

16:14 Facebook. When I tap Facebook, I have a choice of feed, story, or group. And I'll go back to my Facebook group. And I'll choose no silicaways. And boy, this looks great. It just popped the image right in there. Let me tap on the photo and try to add an alt tag. Nope, nothing. All I can get is that X. And it's not Facebook's fault. It's actually the Apple share sheet. I've tried a bunch of different applications and none of them work from Apple Photos to add an image and then add alt tags. After that disappointment, let's cleanse our pallets with Discord. They make adding alt text super simple. I'll tap on the plus button, which takes us right to our photos library. I need to allow

16:59 full access. And this time I'll select the photo of the flamingo from Chile to insert it into the new post. Now I simply tap on the photo and the first option I see is to add an image description. Can't get any easier than that. This takes us right to the field where I can dictate my alt text. You can see that Discord allows a thousand characters. A pink flamingo in profile against a blurry blue background. We can only see the flamingo's head, beak, and neck. Period. It's an unsettling image because the bird has a yellow eye with a very tiny black pupil. And there's also a single drop of water about to fall from the tip of its beak. I'll tap save in

17:45 the upper right. And now you can see that my image says alt on it, indicating that I've successfully added alternative text. I told you Discord was easy. Let's take a look at how Threads does at adding alt text. I'll tap the pencil icon at the bottom to start a new thread. Then I'll select the icon to add an image. I'll go here and I'll choose the image of my husband Steve at Yellowstone and then I'll tap add in the upper right. In previous apps like Discord that we just looked at, if we saw alt on an image, that meant we'd successfully added our alternative text. Threads actually does it the other way around. At the bottom of the image I just embedded, it already says alt. We know

18:33 we haven't added it yet, so it seems easy enough that we should just tap on that button to enter our alternative text. Before we do that though, I want you to note that it says at the bottom that adding alt text will replace the one we automatically generate. Well, you know what? Let's see how it does on its own. Let's not add any alt text. I'll cancel out and I'll post the image. Tap view. Now I can see the image and let's go ahead and run voice over and find out what it said in its automatically generated alt text. Voice over on threads pod feed buck image button image tap to open full image button image

19:18 tap to open full screen close button close button pod feed button image button image voice over off >> well that was disappointing sadly you can see that threads does not automatically generate an alt text like it said it Good. I'll tap the three dots here and I'll delete this post so that I can do it again. I'll tap on alt and I'll dictate in our alt text. A man is crouched down facing away from us in front of volcanic pools that perfectly reflect the evening sky, the clouds, and the man. Period. The sun is just setting behind a hill, which

20:04 puts the man in silhouette. Period. The pools have steam rising off of them, creating a mystical effect in the image. Period. Okay, that looks pretty good. I'll tap done. Now, I'm not really sure I can trust threads because it said it had alt text before and it didn't read anything. So, let's go ahead and post this and then I'll turn on voice over again. I can view. And now I'm going to run voice over one more time. >> Voice over on. A man is crouched down facing away from us in front of volcano pools that perfectly reflect the evening sky. The clouds and the man. The sun is just sitting behind a hill which puts the man in silhouette. The pools have steam rising off of them creating a mystical effect in the image. Button

20:50 image voice over off. >> All right, that's perfect. It actually works this time. Now, I'm going to delete this image because I didn't put a post on it and I want to get rid [clears throat] of it here. Overall, threads was one of the easiest ones to add alt text to an image, but I wanted to make sure you knew not to trust it to create the alt text automatically. Another thing I wanted to tell you about voice over is that I have it playing the voice back fairly slowly. Most voiceover users that I've met and in general screen reader users run the voice at a much much faster pace, but I wanted to make sure you could understand it. You now know how to find the buttons to add alt text to your images pretty much on any social media service. I think you've got the hang of it. But what if you

21:36 could have AI write fabulous alt text for you? As a little bonus, I'm going to teach you how to have Be My Eyes do just that. In the app store, first download the app Be My Eyes. This app is an assisted tool for the visually impaired and has two major functions. Be My Eyes connects people needing cited support with volunteers anywhere in the world through live video. Imagine if you were blind and you couldn't find your cuff links. You could hold up the camera in Be My Eyes and have a volunteer tell you, "Oh, there they are. I see them on the couch." It also has a function of being able to write AI generated image descriptions that you can use for alt text. Let me flip over to the app Be My Eyes, which I already have open. On this first screen, we need to select the

22:22 button labeled need visual assistance. Note that while it says call a company or volunteer, it doesn't actually call by default. That's a further step. Even if you're cited, don't choose the second button, share your eyesight, or you won't get access to the AI image recognition. If you would like to volunteer to help, you can create two accounts with different email addresses. So, you can share your eyesight on one, but in the other, we can get to that AI generated alt text. So, for now, we'll use the upper button. We have a privacy and terms page, and it's an important one to read if you are going to use Be My Eyes as an unsighted person. Let's tap agree. And now we're going to continue with email. Or you could log in with Apple or Google or Facebook. And now you can create an

23:09 account. Now that I've created a login, I'm asked to choose my language. I'll choose English. I'm going to choose not to turn on any notifications. So I'll tap not now. And now it says welcome Allison. And I'm going to say get started. At this point, we see a giant blue button that says call a volunteer. This is not what we want to do. We want to access the be my AI functionality, which is in the second button in the bottom row. It's a tiny icon of a camera. So, I'm going to tap that. And now I have some information about how the AI is going to try to generate this text. And it does tell you to be aware that there are limitations. And I I think it's really well written because it does tell you double check important things and make sure this is correctly representing the image you're going to

23:54 look at. So, I'll tap get started. And now, by default, it's going to ask for access to the camera. And I'll go ahead and say okay or allow. It's going to want to take a picture. This is a coaster that's sitting on my desk. And I'm just going to tell it to take a picture right now. So, you can see how this works. It's taking the picture. And then it's going to start analyzing what it sees in that image. If I was to describe this, I would say it was a black and white coaster from Universal Audio. shows a couple of nerds in white shirts working on some electronic equipment. Instead, it says, "This picture shows a black and white photo of two men working on some electronic equipment." So far, that's what I said. They appear to be engineers. I would guess so, too, as

24:39 indicated by the caption at the bottom of the photo, which reads, "Universal Audio Engineers bench testing the original 1176 lighting amplifier circuit 1967." I never even noticed there was text below the image. The men are focused on their work. One is holding papers and the other is adjusting something on equipment. The photo is on a coaster with rounded corners placed on a wooden surface. The Universal Audio logo is visible at the top center of the coaster. Okay, that's bananas, right? That's really, really cool. Okay, I'm going to tap the X. At this point, we don't need to be in Be My Eyes anymore because we're going to be able to access its functionality from within the share sheet. I'll swipe up and let's go back into photos. We can see the photo of my husband at Yellowstone and you remember the alt text that I wrote for it. If I

25:25 tap the share sheet and I scroll all the way to the bottom, you'll see the option to describe with be my eyes. By the way, you can always edit actions. Go down to the bottom, hit the plus, and now it'll be near the top. And in fact, I'm going to drag it all the way to the top because I use it often enough. I'll tap done. So now when I bring up the image, the very first thing in my list is describe with be my eyes. I'll tap this and you're going to have to wait a minute or so here, maybe not even a minute, 30 seconds. Well, it's going to write a message describing what this image is. This is the functionality that's very useful for people who are visually impaired and want to understand an image. Now, I'm an engineer and I wrote my description very factually. Let's hear what B My AI has. The picture

26:12 captures a serene natural scene at dusk. A person stands in silhouette against a backdrop of steam rising from geothermal features, likely hot springs or geysers. Now, how on earth did it know that? But that's exactly what it was. The setting sun, partially obscured by clouds, creates a warm glow on the horizon. The sky is a mix of blue and scattered clouds reflecting the sunlight. In the foreground, there's a calm body of water mirroring the person, the sky, and the surrounding landscape, creating a symmetrical reflection. A single tree to the left also stands in silhouette, contributing to the peaceful ambiance of the scene. Now, again, I'm an engineer, and I gave a very factual explanation, but I didn't really do a good job of conveying what the image feels like, and I told you that's one of the main reasons you write an alt text for an

26:59 image. If I tap and hold on the text, I immediately get a copy button. Now I can cancel out of this and I can swipe up and I can add it as the caption for the image. There's two reasons I do this. Let me tap done. The main reason I put it into the caption is because as I go from social media site to social media site if I want to post it several places. I can go back here and copy it again and I haven't lost it. But there is one application that allows us to actually use that as the alt text without doing any extra work. I'll flip over to the app store to show it to you. The app is called Mona for Mastadon. It's a terrific application. Once it's installed, we'll be able to use the share sheet to send images to Mona, and

27:45 the caption will turn automatically into the alt text, unlike every other application I've tried. Let me prove it to you. I'll go back to photos. I'm going to tap the share sheet. And you can see my fourth option over is to send to Mona. I'll tap on Mona. And now you can see that my image has been embedded. And when I tap on the little icon on the bottom left, that's the icon in Mona that tells you there's all text on an image. I can go to edit description, and there's the entire description that we put into the photo using Be My AI. Now, I wish all applications use the caption, and if anybody hears about other applications that do, I'd really like to know about it. I'll tap done, and I'll X out of that. so that I don't actually post it.

28:31 Mona was written from the ground up with accessibility at the forefront. So, it's got a lot of features for people who do not have site, but it's also made for people like me who want to support those people who can't see the exciting images that I post on Mastadon. [music] My goal in this tutorial was to illustrate how alt text can enrich the online experience for those with visual impairments while at the same time increasing the reach of the images you post online. With a little bit of soouththing, you can now figure out how to add all text in any of the social media platforms you use. Huge thank you to Allison Sheridan for bringing us that today. Uh that of course being one of the many screencasts online that you can

29:18 get as part of that video tutorial subscription service. It is a paid for service as I said at the top that tutorial was so important that Lee Garrett chose to make it publicly available but you do have to pay for other screencasts which is totally fair because of the work they do. Uh if you're interested screencastsonline.com is where all the details are. You can sign up there and you can watch all of the back catalog during that free 7-day trial. [music] So there you go. screencastsonline.com. Huge thank you to Allison Sheridan for bringing us that. That is it from us today. Thank you as always for taking the time to listen to Double Tap. [music] We will be back with Mainstream next. And of course, we're back on AMI Audio on podcast and on YouTube every single day. Catch you then.