Accessible Images on Social Media

Social media has made it easier than ever to share images online, but this can quickly create problems for people with disabilities and poor internet connections. This blog post covers how to make images both accessible and findable on social media by adding a simple yet powerful component: alternative text.

---

Jump To a Section:

---

Alternative Text Basics

What is Alternative Text?

Alternative text is a text description for non-text content on the web, like images. It is also known as alt text, image descriptions, alt attributes, alt descriptions, and (incorrectly) alt tags.

The use of alternative text has been a best practice in web design for more than twenty years, but it wasn’t until fairly recently that users have been able to add it to images on social media platforms like Facebook, Instagram, Twitter, and LinkedIn.

Who Benefits from Alternative Text?

Alternative text is helpful to a variety of people for multiple reasons, including:

• People with visual impairments (e.g., blindness, low vision) who use assistive technology to browse the web.
• People with poor internet connections that can’t load images.
• People who want their images to be found in Google Image searches.

Best Practices for Writing Alternative Text

Successful alternative text should be short, descriptive, and easy to understand. Consider how you would describe the image to someone who couldn’t see it, and how you could do so quickly.

Great alternative text is:

• Concise:  Be as specific as you can in as few words as possible. Some screen readers will only read the first ~125 characters of the alternative text before cutting off.
• Accurate:  Make sure your spelling and grammar are correct. Serious errors can be difficult or even impossible for some assistive technology to interpret.
• Relevant:  Use keywords in your alternative text to improve its search result ranking, but don’t use it as a space to cram in keywords.

---

Alternative Text on Facebook

On April 4, 2016, Facebook rolled out an accessibility feature called automatic alternative text, which uses text, face, and object recognition technology to generate a description when an image is uploaded to Facebook.

For several years, these image descriptions were often vague and unhelpful, like, “Image may contain: indoors,” or, “Image may contain: text.” But, as of 2020, the technology has drastically improved and is capable of identifying objects in photos and transcribing full paragraphs of text.

For the following example, I uploaded an image to Facebook containing text that says, “This is an example of an image of text. The quick brown fox jumps over the lazy dog.”

By entering the Photo Detail options for the post, the following automatic alternative text is revealed:

Image may contain: text that says ‘This is an example of an image of text. The quick brown fox jumps over the lazy dog.’

Notice that Facebook’s text recognition technology was able to transcribe the words in the image perfectly, but it added unnecessary text to the beginning of the description: Image may contain: text that says ‘. This additional text takes up the first 35 characters of the alternative text, yet it adds nothing of value to the description.

Moreover, this feature does not work retroactively. Photos posted to Facebook prior to the spring of 2016 do not have automatic alternative text, and photos posted from 2016 to 2019 may have alternative text that is vague or inaccurate.

Facebook’s automatic alternative text isn’t perfect and it can’t describe an image as well as a human can. To ensure that your image descriptions are accurate on Facebook, always replace the automatic alternative text with your own text. This can be done when you post an image or later on.

Adding Alternative Text with the Facebook App

For New Images:

1. Begin by uploading the image(s) as you normally would.
2. Next, click the icon with three horizontal dots on the top right corner of the image. If you are uploading multiple images, you must click one of the image thumbnails first.
3. Click the Edit Alt Text option in the menu that appears at the bottom of the screen.
4. Type your alternative text in the text field then click the Done button. Repeat this process for each image in the post if there are multiple.

For Existing Images:

1. Begin by clicking any image of yours to expand it.
2. Next, click the icon with three horizontal dots on the top right corner of the image.
3. Click the Edit Alt Text option in the menu that appears.
4. Click the Override generated alt text button.
5. Type your alternative text in the text field then click the Done button.

Adding Alternative Text with the Facebook Website for Desktop

For New Images:

1. Begin by uploading the image(s) as you normally would.
2. Next, click the Edit button on the top left corner of the image. If you are uploading multiple images, you must click the Edit All button first. It is located in the top left corner of the first image in the post. (Note: the Edit and Edit All buttons only appear when you hover over the image with your cursor.)
3. Click the Alternative text option on the left side of the Photo Detail window.
4. Type your alternative text in the Custom alt text field then click the Save button.
5. Click the Back arrow icon on the top left corner of the Photo Detail window to return.

For Existing Images:

1. Begin by clicking any image of yours to expand it.
2. Next, click the icon with three horizontal dots on the top right corner of the post details.
3. Click the Change Alt Text option in the menu.
4. Type your alternative text in the Type Alternative text… field then click the Save button.

---

Alternative Text on Instagram

Instagram announced on November 28, 2018, that it would introduce both automatic alternative text and custom alternative text to its platform, following Facebook’s lead. While the benefits and drawbacks of these features are almost identical to Facebook, Instagram has one additional limitation: alternative text can only be added and edited on the Instagram app. This did not come as a surprise since Instagram does not officially support posting from a desktop, but it does make adding/editing alternative text a bit more tedious. Still, it’s a definite win for both accessibility advocates and SEO-conscious Instagrammers.

Adding Alternative Text with the Instagram App

For New Images:

1. Create a post 1-10 images as you normally would.
2. On the New Post options screen, scroll to the bottom and click the Advanced Settings > button.
3. Under Accessibility, click the Write Alt Text button.
4. Type your alternative text for each image then click the Done button on the top right corner of the screen.

For Existing Images:

1. Open an existing Instagram post and click the Image Options button on the top right corner of the post. It is an icon with a row of three dots.
2. Click Edit in the menu options that appear.
3. Click the Edit Alt Text button on the bottom right corner of the thumbnail image.
4. Type your alternative text for each image then click the Done button on the top right corner of the screen. Note: the thumbnail images will not appear here.

---

Alternative Text on Twitter

On March 29, 2016, Twitter introduced the option to add alternative text for images. This option was only available to iOS users at first, but it has expanded to other operating systems over the years. By January 31, 2020, even animated GIFs on the platform included the option to add alternative text.

But, unlike Facebook, Instagram, and LinkedIn, Twitter has one major limitation: alternative text can only be added to an image when composing a tweet. This means that users can’t add or edit alternative text for images that have already been posted. While some accessibility advocates have requested this capability, Twitter has not announced any plans to make such a change.

While this limitation makes it inconvenient for users to add alternative text on Twitter, it’s still both possible and worth doing.

Adding Alternative Text with the Twitter App

For Standard Images:

1. Begin by composing a tweet as you normally would, and attach 1-4 images.
2. Tap the +ALT button on the bottom right corner of each image.
3. Type your alternative text in the Describe this photo… field. Remember: this cannot be edited after the tweet has been posted.
4. Click the Done button on the top right corner of the screen to save the alternative text.

For Animated GIFs:

1. Begin by composing a tweet as you normally would, and click the GIF button to attach an animated GIF from Giphy.
2. Tap the +ALT button on the bottom right corner of the GIF.
3. Type your alternative text in the Describe this photo… field.
4. Click the Done button on the top right corner of the screen to save the alternative text.

Adding Alternative Text with the Twitter Desktop Website

For Standard Images:

1. Begin by composing a tweet as you normally would, and attach 1-4 images.
2. Click the Add descriptions link below the image(s).
3. Type your alternative text in the Description field. If there are more than one image in the tweet, use the arrow buttons next to the Save button to move on the next image’s description.
4. Click the Save button on the top right corner to save the alternative text.

For Animated GIFs:

1. Begin by composing a tweet as you normally would, and click the GIF button to attach an animated GIF from Giphy.
2. Click the Add descriptions link below the GIF.
3. Type your alternative text in the Description field.
4. Click the Save button on the top right corner to save the alternative text.

---

Glossary

alternative text

A text description for non-text content on the web, like images. Alternative text is also called alt text, image descriptions, alt attributes, alt descriptions, and (incorrectly) alt tags.

assistive technology (AT)

In this context, hardware and/or software that provides additional or improved functionality to a webpage so that it’s accessible to people with disabilities. Some examples of assistive technologies are screen magnifiers, screen readers, and text-to-speech software.

automatic alternative text

Alternative text that is automatically generated for an image using text, face, and object recognition technology. This is a relatively new feature on Facebook and is not a perfect alternative to human-generated alternative text.

blindness

A lack of vision, which can range from partial blindness (very limited vision) to complete blindness (no vision whatsoever and inability to see light). People with blindness often use assistive technology like screen readers to interpret web content.

braille

A system of touch reading and writing for blind persons in which raised dots represent the letters of the alphabet and numbers. Some screen reading devices can convert web content into braille.

impairment

An absence of or significant difference in a person’s body structure, body function, or mental functioning (e.g., loss of a limb, loss of vision, or memory loss). While impairment is a dimension of disability, not all people with impairments are disabled.

limitation / activity limitation

Difficulty to do certain activities because of an impairment (e.g., difficulty seeing, hearing, walking, or problem solving).

low vision

Vision loss that can’t be corrected with glasses, contacts, or surgery. This is different from blindness because some sight remains. People with low vision often use assistive technology like screen magnifiers to interpret web content.

screen magnifier

Visual reading assistant used to change the font, size, spacing, color, and/or synchronization with speech of text on a webpage.

screen reader

Hardware or software used by people who are blind to read text through synthesized speech or braille.

search engine optimization (SEO)

The process of improving the quality and quantity of website traffic to a website or a web page from search engines.

text-to-speech software

Software that converts text on a webpage into synthetic speech.

web content

Any textual, visual, or audible content on a website. This can include text, images, videos, sound files, etc. This is also simply called content.

---

References

1. Accessible images for everyone — Twitter Blog
2. Alternative Text — WebAIM
3. Alt Text — Moz SEO Learning Center
4. Automatic Alternative Text Announcement — Facebook Accessibility
5. Blindness and vision loss —MedlinePlus
6. How does automatic alt text work on Facebook? — Facebook Help Center
7. How do I edit the alternative text for a photo on Facebook? — Facebook Help Center
8. How to make images accessible for people — Twitter Help Center
9. Impairments, Activity Limitations, and Participation Restrictions — Centers for Disease Control and Prevention (CDC)
10. Improved Accessibility Through Alternative Text Support — Instagram Blog
11. Low Vision — Cleveland Clinic
12. Screen Magnification — Laura Jones, Perkins School for the Blind eLearning
13. Web Content Accessibility Guidelines (WCAG) 2.1 — World Wide Web Consortium (W3C)