Using image descriptions to make social media more accessible

Screenshot of using Siri to activate the VoiceOver setting on an iPhoneAfter watching a YouTube video from motivational speaker and vlogger Molly Burke about how she uses her iPhone (she is blind), I’ve been browsing the web with VoiceOver activated on my iPhone. It is a great way to learn how best practices actually work on other company’s websites and it’s been a useful tool for me to catch accessibility errors in my clients’ websites before they have a chance to be a barrier to an actual user. (My personal blog, which you are currently reading, is an ongoing work in progress when it comes to accessibility. If you encounter a barrier, please feel free to reach out to me on my contact page and let me know! Or just leave a comment if that is easier.)

I’ve also been using social media in my personal life with my accessibility settings activated. I put my phone under my pillow, put on my headphones, and lay down with my eyes closed while using various social media apps. My primary reason for this is to reduce the strain on my eyes while browsing social media at night (after a long day of staring at my screen all day for work) and secondly, to help me learn more about how these tools work with apps.

This is how I accidentally learned just how boring my social media feed can be if you can’t see anything.

Social media is heavily reliant on visual elements. Memes, GIFs, flyers, photos, and videos make up a huge percentage of the content on Facebook, for example. Twitter can be visual-heavy as well. I found myself often getting bored with those apps and wandering off to find something else to do on my phone like TED Talks on YouTube or listening to podcasts. Do you rely on social media to promote your business and brand to potential customers? Do want to keep your social media fans and followers engaged? Consider implementing a standard image description policy into your social media workflow.

Twitter’s Accessibility Settings

You might already have this setting activated, but if not, it’s quick and available for all Twitter accounts. Go to Settings and Privacy > Accessibility > Image Descriptions.

Screenshot of Twitter's accessibility settings screen with options for activating image descriptions and video autoplay.

 

Check the option box to activate your image descriptions, click “save changes,” and you’re all set! Now whenever you go to upload an image into a Tweet, you’ll see a new option:

Screenshot from Twitter showing the process of uploading an image into a tweet with accessibility settings activated.

Click the section just below your image that reads “Add description” and you’ll be greeted with a shiny new interface where you can write out a full description of whatever fun or important information you are conveying with your image upload.

Screenshot showing the window where users can add a description to their images while uploading them to a tweet.

It’s a well-built and well-supported feature that we all should be using while we are uploading images to our Tweets. Now when users browse your Twitter feed, they will hear a narration of your regular Tweet and then at the end, they will hear “Image: ” followed by whatever you cared enough to include in your description. If you leave out a description, they will simply hear that an image exists and what date it was uploaded. Boring.

Image Descriptions on Facebook

Facebook’s native tool for adding alt tags or descriptions to images isn’t very user-friendly (yet), so the standard practice is to add your own image description declaration to your posts just below your regular social media verbiage. You would use the words “Image Description” followed by a colon, “:” and then an extremely detailed description of what the image is supposed to convey. Some brands like putting this information in between brackets [Image Description:]. Whichever method you decide on, just try to stay consistent.

If you don’t include an image, Facebook will sometimes attempt to create one using the same artificial intelligence they use to find your face in your friend’s photo uploads. You can read more about that slightly creepy but super useful project from Facebook in this article over at the Verge. You should not rely on Facebook to engage and inform your users for you. If you want to control the message and protect your brand, write your own image descriptions manually!

Adding a description is especially important when the image is an announcement for a program, event, or job notice! Otherwise, that essential information will be completely invisible to users with screen readers.

But if you do want to use Facebook’s tool, you can access by going to one of your existing photos, clicking “options” and then selecting “Edit Alt Text” in the window that appears.

Screenshot of the photo options screen on Facebook

From there a window will pop-up where you will enter your actual image alt text.

Screenshot of Facebook's text editor window for adding alt text to your images.

The message in this window will override whatever automatic image description Facebook’s AI may have tried to create. But keep in mind that this text will only be accessible to users who have their screen readers activated. That may seem like an odd comment to make considering this entire blog post has been about screen readers, but using image descriptions in your Facebook captions can also improve the user experience for people who have any one of a wide range of disabilities that makes it hard for them to read an image that has a dense wall of text inside it. Like, for example, an event flyer.

What should I include in my descriptions?

So now that we know how to include image descriptions, what should we actually put inside of them? Here is an excellent example from the American Council of the Blind’s Facebook page where they were promoting a holiday event.

Screenshot showing an example of typing out image descriptions manually on a Facebook post. Example is from the Facebook page for the American Council of the Blind.

The screenshot doesn’t capture the full amount of descriptive text, but you can visit the post here on Facebook to see how a manual image description works in action. But you can see their description doesn’t stop at just information. They also describe the artistic elements of the photo including the color of the background and the placement of the pastel colored eggs. The idea here is to paint a picture while also disseminating important information. If your sighted-users find your images enjoyable, why not try to create that same experience for your blind users?

More Information!

This blog post was just a quick summary of an important topic. If you are interested in digging deeper into the “what why and how” of writing image descriptions, here’s a list of helpful links:

Leave a Reply

Your email address will not be published. Required fields are marked *