How to Add Alt-Text in Instagram

Instagram uses object recognition technology to automatically provide a visual description of any image posted. You should replace this text to provide a better description of a photo.

To Edit Alt-Text:

  1. Take or upload an image as you normally would. After adding any filters or making additional edits, tap Next.
  2. Tap Advanced Settings at the bottom of the screen.
  3. Tap Write Alt Text.
  4. Write your Alt-Text in the box and tap Done(iOS) or Save (Android).

To Edit Alt-Text of a Photo After You’ve Posted It :

  1. Go to the photo and tap the three dots icon.
  2. Tap Edit.
  3. Tap Edit Alt Text in the bottom right.
  4. Write the alt text in the box and tap Done(iOS) or the Check Mark icon (Android).

More information about Instagram’s object recognition technology and further instructions for adding and editing images can be found in Instagram’s Help Center.

How to Add Alt-Text in Facebook

Facebook uses object recognition technology to automatically provide a visual description of any image posted. You should always replace this text to provide a better description of the image.

To Edit Alt-Text:

  1. Click Photo/Video at the bottom of the Create Post screen.
  2. Select the photo you want to add.
  3. Click Edit Photo (paintbrush icon), then click Alt Text.
  4. The automatically generated text will be shown on the left side of your photo. Click Override generated alt text to edit it.
  5. Write your Alt-Text in the box. To change back to the automatically generated text, click Clear.
  6. To save your alt text, click Save in the bottom right.

To change the Alt-Text of a photo after you’ve posted it:

  1. Click the photo to open it.
  2. Click Options in the bottom right and select Change Alt Text.
  3. Click Override generated alt text or change the alt text in the text box. You can also click Clear to change your edited alt text back to the automatically generated text.
  4. Click Save.

Note: The above instructions are for Facebook Classic.  The Beta version running as of the date of this post (November 2019) does not yet have the option to edit Alt-Text.  Alt-Text is still being generated using the object recognition technology for images posted in the Beta version.

Additional information about Facebook’s automatic Alt-Text tool or further instructions on adding and editing photos is available in the Facebook Help Center.

How to Add Alt-Text on Twitter

How to enable the composition of image descriptions from twitter.com

  1. Click on the more icon and select Settings and privacy from the dropdown.
  2. Click Accessibility from the list of settings.
  3. Find the Compose image descriptions checkbox.
  4. Check the box to turn the setting on or off.

How to add image descriptions in Tweets from twitter.com

  1. Click on the Tweet compose button
  2. Attach your photo(s).
  3. To insert descriptive text, click Add description beneath the image

    Jim Halpert from The Office (US version) holding a pie chart: 60% Procrastination; 39% Distracting Others; 1% Critical Thinking
    Jim Halpert from The Office (US Version) (c) 2007 NBC Universal Television.
  4. Type your description of the image and click the Done button (The limit is 420 characters).

For tweets with multiple images, you must add each description separately.

Note: Image descriptions cannot be added to GIFs or videos. When using GIFs or videos, manually add a description in square brackets of the image at the end of your tweet.

Example:

Jim Halpert from The Office (US version) holding a pie chart: 60% Procrastination; 39% Distracting Others; 1% Critical Thinking
Jim Halpert from The Office (US Version) (c) 2007 NBC Universal Television.

Instructions for adding Alt-Text on an iPhone or Android mobile device are available in the Twitter Help Center.

Best Practices for Social Media Accessibility

Image Descriptions / Alternative Text (Alt-Text)

Most social media posts include images – photographs, GIFs, memes, etc. For those with vision loss, the only way they are able to “see” these visual objects is to have a screen reader or text-to-speech software read any provided visual description of the image.

Most of the major social media platforms now allow for image description or Alt-Text, and many even provide machine-generated Alt-Text automatically.  Do not rely on that machine-generated description – it is rarely accurate (although they are getting better).  More importantly, if you are including an image in your social media post, there is probably an underlying context or connotation to the image – a subtly that an AI cannot pick up on.  Good visual description will not only state what is in the image but will provide that underlying context in a way that is clear and concise.

Example:

Jim Halpert from The Office (US Version) holding a pie chart: 60% Procrastination, 39% Distracting Others; 1% Critical Thinking
Jim Halpert from The Office (US Version) (c) 2007 NBC Universal Television.

Machine-generated Alt-Text: A man in a tie holding a piece of paper.

Visual Description with context: Jim Halpert from The Office (US Version) holding a pie chart: 60% Procrastination, 39% Distracting Others; 1% Critical Thinking

Step-by-step instructions for adding Alt-Text to images on Facebook, Twitter, and Instagram

Video Captions

For those with hearing difficulties, captions are incredibly important.  Captions are also used by a wide variety of people who do not have hearing difficulties for a number of reasons – captions aren’t optional, if your video doesn’t have captions, it isn’t truly accessible to your full audience.

The easiest way to provide accessible videos on social media is to upload the video file to YouTube first and caption it using the caption/transcript tool.  Once the captions have been added, use the link provided by YouTube to embed the video into the social media post.

Full instructions on using the YouTube captioning tool are available in the YouTube Help Center.

Use Explicit Text or Descriptors for URLs

Lengthy URLs are incredibly cumbersome for screen readers – providing explicit text with the URL embedded is easier for screen reader users and is visually more appealing for sighted users as well.  Not to mention, embedding your links instead of including a full URL takes up fewer characters and allows for more space for your actual message!

Which would you prefer?

https://giesbusiness.illinois.edu/faculty-research/faculty-staff-directory

or

GIES Faulty Directory

Use Camel Case for Hashtags

Hashtags that are written in all uppercase or all lowercase are difficult to read for a number of users.  They present problems for users with dyslexia, low vision, and for screen reader users (a screen reader will try to read the hashtag as one word if there is no differentiation between words).  In fact, a majority of people – regardless of disability – find hashtags that are not in camel case difficult to read.

Using camel case also prevents confusion for all users by providing a clear message about the contents or context of your post.  A great example – if you click #superbowl are you going to get score updates for the Super Bowl or images of Superb Owls? If you use camel case (#SuperBowl or #SuperbOwl) you increase the clarity and searchability of your post.

Hashtags should be listed at the end of the post – not in the middle of other text – as this can interfere with the way the screen reader reads the text.

Use Emojis Sparingly

On most social media platforms, emojis have embedded semantic information that allows them to be screen reader compatible.  For example, 😊 will be read as “Smiley face” by most screen readers or text-to-speech applications. So, emojis themselves are accessible – which is great news considering how often we use them!

However, it’s best not to use a string of emojis or repeat the same one multiple times – no one wants to listen to their screen reader saying “Smiley face, ghost, pumpkin, ghost, leaf, pumpkin, candy” – just pick one or two emojis per post.

Consider Color Contrast

Choose images and videos with strong color contrast and avoid color combinations that pose difficulties for those with color blindness or color vision deficiency (CVD) such as:

    • Red & green
    • Green & brown
    • Green & blue
    • Blue & gray
    • Blue & purple
    • Green & gray
    • Green & black

If you can’t avoid these combinations (for branding/marketing reasons), do your best to provide the maximum amount of contrast (light-to-dark) between these colors.

You can also upload your image to Coblis to see how someone with CVD sees your image.  By using this tool, you can ensure that the contextual information that color provides in your image isn’t being lost.

Author: Rebecca Graham