{"id":27206,"date":"2022-11-15T13:40:19","date_gmt":"2022-11-15T21:40:19","guid":{"rendered":"https:\/\/www.podfeet.com\/blog\/?p=27206"},"modified":"2022-11-20T17:50:31","modified_gmt":"2022-11-21T01:50:31","slug":"alt-text","status":"publish","type":"post","link":"https:\/\/www.podfeet.com\/blog\/2022\/11\/alt-text\/","title":{"rendered":"Get Your Content Out to More People by Adding Alternative Text to Your Images"},"content":{"rendered":"

The Internet with a Screen Reader<\/h3>\n
\"Screenshot
Descriptive Text Even Shows on Hover in Mastonaut Mastodon App<\/figcaption><\/figure>\n

The Internet can be a very rich experience for those with visual impairments, but all of us can help make the experience even better for them with very little effort.<\/p>\n

If a person with vision impairments is using a screen reader to enjoy their online experience with either a computer or a mobile device, images mean nothing to them. But they can enjoy your images if you make a very small effort.<\/p>\n

When you post an image online through social media, you have the option to add a description to the image. These descriptions are often called alt text, or alternative text. The name doesn\u2019t really matter but it\u2019s a phrase you might run across in your quest to add descriptions.<\/p>\n

Why Should I Bother?<\/h3>\n

You might already be thinking, why should I bother? I can easily give you the motivation to make this small extra effort. When you write a Tweet, are you hoping that people read it? Do you take care composing it to make it compelling to others? If you are, why not increase the probability that it will be read and understood by more people?<\/p>\n

You might also be thinking, sure that would increase my audience, but how many people out there are actually blind? According to a 2017 report from the National Institutes of Health<\/a>, 253 million people are blind or have mild to severe visual impairment. In spite of successful efforts to reduce the root causes of visual impairment, we are living longer (yay!) which means an increase in age-related blindness.<\/p>\n

While not all visually impaired people need to use screen readers, I hope I\u2019ve illustrated that a massive number of people could potentially benefit from us adding descriptions to our images.<\/p>\n

But I bet you think it sounds hard. You think I\u2019m going to describe some arcane process where you have to know weird symbols and programming tricks to get this done. Modern social media tools have made this trivially easy.<\/p>\n

What Makes Good Descriptive Text?<\/h3>\n

Before we get into some specific examples of how to do this, let\u2019s talk about what makes good descriptive text. I\u2019m not an expert by any means, and I hope my visually-impaired friends will chime in with improvements on this, but let me take a shot at it.<\/p>\n

The more descriptive the better<\/h4>\n

Today I posted a photo of my dog on Mastodon. In the alt text, I could have simply written \u201cdog\u201d. While technically an accurate description, would that really add much value to the reader?<\/p>\n

Instead, I included her color, and what she was doing in the photo. I said her name was Tesla, but since in real life I always explain that she was named after the physicist, not the car, I added that to the description. It wasn\u2019t a paragraph of extra text but just enough to let people know how it would be perceived if they could see it.<\/p>\n

I wouldn\u2019t write paragraphs about the image because, on top of being time-consuming for you, it\u2019s time-consuming for the screen-reading user.<\/p>\n

Don\u2019t Repeat What\u2019s Already Said<\/h4>\n

The next thing to keep in mind is that the screen reader has already read out the text of your message, so don\u2019t repeat any of that in the alt text.<\/p>\n

If your tweet says, \u201ccheck out my silly dog rolling on her back\u201d, don\u2019t repeat that in the alt text. Think about what the sighted user will get from that image and add it to the alt text. Maybe in that example, you could write, \u201cdog has her tongue hanging out in a goofy way\u201d or \u201cshe has leaves stuck all over her face.\u201d<\/p>\n

Have Some Fun<\/h4>\n

I don\u2019t know if this is officially sanctioned, but I like to have some fun in my alt tags. I enjoy knowing that I\u2019m whispering some secret code into the ears of the visually impaired that the rest of the audience doesn\u2019t get to hear. Why not throw in a little humor while we\u2019re having that intimate experience? I never know who hears my silliness but I like to think that I spread a little more joy in this world.<\/p>\n

Screenshots of Text<\/h4>\n

Sometimes the image you want to post is a screenshot that includes some text. Maybe it\u2019s a meme or maybe it\u2019s an actual document with lots of words. I\u2019m not sure if this works on Android or Windows, but on the more recent versions of macOS and iOS, you can actually select the text in an image, copy it, and plop it into the alt text.<\/p>\n

I don\u2019t know if it\u2019s considered good form to paste a full-page document\u2019s worth of text into an alt tag, and the descriptive text field might not allow that many characters, but I’ve tried it a few times. I\u2019d love to hear from our visually impaired listeners on whether that\u2019s helpful or not. I imagine a link to the content on the source site might be better, but that\u2019s not always possible.<\/p>\n

Now that we\u2019ve got our motivation to add descriptive text to the images we post online and we know we have the freedom to add little Easter eggs from time to time that only those using screen readers get to hear, let\u2019s talk about a few apps as examples of what to look for.<\/p>\n

Twitter<\/h3>\n

While Twitter is still a thing, it\u2019s a good place to start. Let\u2019s assume you\u2019re using the web interface at twitter.com to create your brilliant tweets. You write something clever, then you hit the little icon of a mountain with a sun to add an image. You find the image on your desktop and insert it into the post.<\/p>\n

In the bottom right of the image click the Edit button.<\/p>\n

You\u2019ll get a popup with three tabs across the top. The first allows you to crop the image, and the last tab lets you add a content warning. The middle tab is simply labeled \u201cAlt\u201d.<\/p>\n

\n
\"Twitter
Twitter Website Edit Button<\/figcaption><\/figure>\n
\"Twitter
Twitter Website Adding Alt Tag<\/figcaption><\/figure>\n<\/div>\n

Before today you may not have known what alt even meant, but now you\u2019re a pro at this. If you open the Alt tab you\u2019ll get a nice text box where you can type in your secret message to the visually impaired telling them what\u2019s in the image.<\/p>\n

I used a lot of words there so it\u2019s obvious how to do it but the steps are to add your image, click edit, click alt, type, and hit save. That\u2019s pretty easy, right?<\/p>\n

Let\u2019s take it up a notch and describe how to do it in one of the most popular Twitter clients, Tweetbot. After you add the image, you\u2019ll see no indication that you can add the descriptive text. If you tap on the image though, you\u2019ll see three options:<\/p>\n