How To Improve Your Social Media Image Accessibility

Updated 25 April 2018.

Everyone loves images on social media. And visual content is popular in terms of shares and engagement.

But what about the accessibility of those images? A blind person cannot see an engaging photo or infographic.

One way to make images more accessible to users with visual impairments is to add alternative text for images. This is a textual description of the image content.

Alt text can be added to WordPress posts when images are uploaded, but what about social media?

To see how social media image accessibility works, I had a look through some of the major social networks to see what support they had for describing images in words.

Image Descriptions on Twitter

Twitter for Desktop

Twitter brought in image descriptions back in March 2016. It’s not a feature turned on by default so you need to manually enable it to use it.

Go to Settings and Privacy then Accessibility.

Make sure that the Compose Image Descriptions box is checked and Save changes.

You’re now ready to add image descriptions! Here’s how:

1. Compose a tweet.
2. Click on the image button to upload an image from your computer.
   
3. When the image is added, click on it.
   
4. Add an image description and click Apply. You can add up to 4 images in a tweet and each one can have an image description.
   
5. When you’re ready, send your tweet!

In the code for the tweet, your image description is automagically converted to alt text. Alt text can be read by screen readers and lets visually impaired people know what your image is about.

Twitter for Android

On the Twitter app for Android, click on your profile avatar and then Settings and privacy.

In the Accessibility section, make sure that the Compose image descriptions checkbox is checked.

Twitter for iOS (iPhone/iPad)

Follow the instructions as for Android. Instead of a checkbox for Compose image descriptions, there’s a slider. Toggle it on.

What about animated GIFs?

Twitter has a large bank of animated GIFs but doesn’t support image descriptions for them yet.

If I wanted to use this GIF of a man applauding, I’d need to write text in the tweet indicating what the GIF represented.

What about Twitter replies?

Twitter now supports image descriptions for replies as well on desktop. It also works on my Android phone, so I imagine it works on iOS too!

What about Twitter cards?

Twitter cards show the featured image for a blog post within the tweet.

For this tweet which was automatically sent by the Revive Old Post plugin, I did use alt text on my post’s featured image. But it is not picked up as alt text by Twitter.

How To Tell If Your Blog Comments Are Spam https://t.co/28QF7vcV4M #blogging

— Claire Brotherton (@abrightclearweb) January 31, 2018

Moral: if you want viewers to see your image description, upload the image and set the image description yourself.

Tips for writing appropriate image descriptions

Image descriptions need to be concise and appropriate for the context. Though Twitter gives you 420 characters to write image descriptions, in most cases you shouldn’t need to use anywhere near that many.

Don’t try and write out an image description for an infographic! You’re much better linking to the infographic embedded in a blog post, with a plain text transcript of the infographic beside it.

When sharing blogs, sometimes the featured image for the blog will contain the blog post title. Rather than use both, which duplicates the title, I will try to write a summary of the post in the tweet and use the blog post title in the image description.

Want to take payments online but don't want a full ecommerce store? Check out this comparison post from @Jammy_Digital testing out @PayPal @stripe @samcartapp @GoCardless https://t.co/273VVDaINv pic.twitter.com/pPUfkWIE5S

— Claire Brotherton (@abrightclearweb) January 23, 2018

The image description for the tweet above is the post title: 4 ways to take online payments for your services.

I love the fact that I can add image descriptions when live tweeting at events.

If I tweet an image of a slide, though, I don’t want to write out every bullet point on the slide in my image description. I think it’s better, in this case, to include the speaker’s name, the event and main point being made in the slide. (These can be split between the tweet and the image description.)

Often speakers will post their slides following talks, so the slide content can be consumed at leisure later.

Our job as designers is to solve users' problems – @nelchee #wcldn pic.twitter.com/RRETi3OccF

— Claire Brotherton (@abrightclearweb) March 19, 2017

My image description for the image in the tweet above was: “Design a solution that solves the user’s problem & makes the client money”.

Adding Twitter Image Descriptions using Buffer

It’s not always convenient to add tweets live, so many of us will schedule them using a tool like Buffer.

The Buffer team added support for Twitter image descriptions last year using the Buffer Chrome extension.

Simply find an article you want to share and click on the Share with Buffer button in your browser toolbar. A window pops up.

Tip: Highlight specific text on the page to add that to the text of your tweet before sharing.

If you have other social networks connected to Buffer, click on the Twitter preview. (You can still post to other networks but the image description feature won’t work for them.)

Choose an image from the selection or click the image + icon to add your own image.

Once you’ve added the image, click on it to preview it full size and add the image description in the box below. Click Save when you are done.

Click on the Add to Queue button to add the tweet to your Buffer queue, or the down arrow for more options.

Image descriptions on Facebook

Facebook has taken a different approach. Facebook doesn’t have an image description feature, but it does have facial recognition technology built in.

Facebook is introducing facial recognition to its automatic alt text for screen readers (though not in the UK, due to privacy laws): https://t.co/TGmgwoUOSX

— RNIB (@RNIB) January 3, 2018

As Mashable’s article explains, Facebook’s facial recognition has had a huge impact on blind or visually impaired individuals being able to converse with their friends and colleagues.

I’ve had a look through my Facebook feed and I’ve seen alternative text like the following:

alt="Image may contain: one or more people, people sleeping, baby and close-up"

alt="Image may contain: 1 person, sky, tree, outdoor and close-up"

This is certainly a better user experience than alt text “Image”!

The only question is if or when Facebook will provide an image description feature that allows you to compose your own text. I post quite a few food photos on my personal timeline and it would be nice to have them described!

At the moment, you will have to rely on describing the content of “non-people” images in your posts.

Image descriptions on LinkedIn

Unfortunately, LinkedIn is behind the other social networks. While it’s possible to post images in status updates or in Pulse articles, there is no way to add alternative text to your images.

This is somewhat ironic given that I found some articles on LinkedIn Pulse stressing the importance of alt text, e.g. What is Alt Text for when labeling images?

LinkedIn doesn’t allow image captions, either, so your only option at present is to describe the image in your text. Or lobby LinkedIn to add the ability to write alternative text on their platform!

I wonder when @linkedin is going to provide the ability to add alt text to images in posts, short and long. #a11y

— Nicolas Steenhout (@vavroom) June 3, 2017

Image descriptions on Pinterest

I don’t regularly use Pinterest, but if you do, it’s worth knowing that you can set Pinterest descriptions when you upload images, which act as alternative text.

When you have uploaded an image, set your description in the “Tell us about this Pin”. This will be your description.

You can add or change a description to an existing image by going to edit it using the pencil icon.

If you are interested in SEO optimisation of Pinterest images, read this article from Tailwind. It explains how you can and should separate out your alt text from your Pinterest description for the best user experience:

• Why You Should Stop Using Alt Tags For Pinterest Pin Descriptions

Tailwind recommends the WP Tasty app to create the perfect alt text and SEO-optimised description.

Bonus: Repin Pinterest pins with a screen reader

Mary in the comments asked this question, so I’ve answered it by making a video about it.

Mouse users would hover over the pin they want to see the Save button, but that’s not an option for keyboard users.

1. Tab through the links until you get to the Pins.
2. Listen to each Pin’s description.
3. When you have one you want to save, select it. (Tabbing forward takes you to hashtags or More information.)
4. Tab through to the Save button for the selected Pin, and activate it.
5. Tab to the board you want to save to and select it. Unfortunately, there’s no audible feedback when you’ve done this; only a visual pop-up.

It’s easier than you think to improve your social media image accessibility

As you’ve seen, Twitter has the most support for image descriptions. Enabling the feature takes seconds.

If you’re a Pinterest user, describing your images is something you definitely want to take advantage of.

Adding image descriptions is simple to do and will help your content reach more people.

I hope you will take the opportunity to do so with your next tweets, status updates and pins!