Pictures Can’t Tell the Whole Story: Your Guide to Making Visual Content Accessible

The boom of visual-centric platforms like Instagram and the highly-buzzed about IPO of Pinterest prove it: images are king on social media. However, as they rise in popularity, there is a similarly rising need to make this sort of content accessible. For the blind or visually impaired, adaptations must be made to ensure equitable access to content and information. Social media platforms are making this easier, but marketers and content creators must do their work with this sort of access in mind. Below, we share a few considerations for all that you make and share—along with shortcuts to major platforms’ tools.

Why Might Images Be Inaccessible?

The World Health Organization reports that 1.3 billion people globally live with some form of visual impairment, including 36 million individuals who are blind. This means that even though we often pour our time, energy and skill into crafting beautiful accompanying images for our content, some of that detail simply won’t be able to be appreciated by a percentage of our population.

However, these people shouldn’t be left out of the opportunity to be informed, entertained, or served by us. For this reason, the painstaking visuals we create should be paired with clarifying language, tagging, and tools that allow them to be understood by anyone who comes across them- no matter what they see (or hear) when they encounter it.

Adding Alt-Text to Images

One of the most common ways to address the gap between shared images and the information they convey is with alt-text. Absent this alt-text, the social media experience for the visually impaired is markedly different. By one account from the United Kingdom’s Thomas Pocklington Trust for the Blind, “people using screen readers would only hear the name of the person who shared the photo followed by the term ‘photo’ when they came up in the news feed.”

Thankfully, advocacy groups and vocal users have pushed these platforms to do better by their users, and have created tools that will make adding alt-text easier to include. This alt-text can be read by screen readers, illuminating the onscreen experience for those who otherwise wouldn’t be able to interpret it.

Instagram

Instagram, the most heavily impacted by this gap between content and understanding, also added its tools for alt-text most recently. There are two options for adding alternative text to images: allowing AI tools to generate a custom image description, or accessing a posts “Advanced Settings” to write your own description. The latter is recommended, as the former will not be easily editable for some time—and is limited by what AI has been trained to recognize. If your images are particularly detailed, or feature highly specific items, it’s more useful for you to take on the task yourself.

Facebook

As would be expected, the options to add alt-text to an image are similar for Instagram’s parent company, Facebook. You have the option of allowing AI technology to produce an alt-text description, or crafting one of your own. To do this, navigate to “Edit Photo,” then click “Alt Text” once it’s been posted. The AI-generated text will appear; if you wish to replace it with your own description, select “Override generated alt text.” Once you hit save, that description will be shared with screen readers anytime that post is viewed.

LinkedIn

LinkedIn added support for alt text quietly, but as of February 2019 has not yet deployed the tool for mobile posting. Therefore, we encourage you to do as much posting to the platform from a desktop as possible.

As you post an image, you’ll see a prompt in the top right corner of the photo allowing you to “Add Description.” Once you select that option, you’ll have 120 characters to elaborate on what is in the image. When you’re satisfied with what you’ve written, click “save” and that text will be available to screen readers whenever needed.

Pinterest

Curiously, a great deal of the chatter about alt text as it pertains to Pinterest is less concerned about accessibility—and more concerned about SEO. And while there is a relationship between image accessibility and search engine ranking, we’re more concerned about it as a mechanism to make information available, than to make it popular.

An announced partnership with Lighthouse for the Blind and Visually Impaired in 2018 has demonstrated the platform’s commitment to making its highly visual interface easy to navigate for all, but a concrete process to include alt text is sadly difficult to come by.

Twitter

For Twitter, one additional step must be taken to ensure that you have the option to make images posted from your account accessible. Navigate to your profile settings, click Accessibility, and then turn “on” the settings for “Compose Image Descriptions.” Once you do this, each picture you post will prompt you to include this description—which can then be read by screen readers.

What About Pictures with Text?

While all of these methods allow for the description of images to identify who or what is in them, it doesn’t help annotate “flat” images that contain more detailed information, statistics, or other tidbits that would be difficult to contain to as few as 120 characters (see LinkedIn).

Should you wish to use text in this way, favor sans serif fonts for ease of reading, and ensure it is as large or larger than the ADA compliant standard of 18 point font. But beyond that, or in the event that the content you’re sharing doesn’t allow for compliance with this standard, think about the story your post tells without the image, or the accompanying text, there.

For these instances, we strongly recommend captions that can retell the story in these images in a way that highlights what appears, without repeating it verbatim for those who can see both. Point out key details or points of information, ensuring that the caption or accompanying text can tell the story you wish to tell…as if the chart, infographic, or graph wasn’t present.

This note also applies to things like quotes overlaid on images, or even online chat questions that are posted in an image. How can the accompanying text supplement the story for those who can see the image, and tell it fully for those who can’t? This two-part question will help you focus your caption writing, making it more useful and compelling for all readers.

A Note on Color

Any time we talk about visual impairment, color blindness must be mentioned alongside other visual impairments. Individuals with color blindness may have challenges distinguishing colors from one another, or they might see without color at all (a far rarer condition). In either case, your design should be forgiving of this possibility, and images you create should be sensitive to the idea that they won’t be seen as you might see them.

A few tips that the University of Minnesota’s “Accessible U” design initiative provides to ensure that your graphics can be understood regardless of their color makeup:

• Consider using texture as well as color to distinguish chart areas from one another. For graphs or charts, colors that are close to one another in saturation might be largely indistinguishable from one another for the colorblind. Color and pattern fill provides an additional distinguishing factor that can make your information easier to interpret.
• Use typefaces over color-coding to separate text. It is common and tempting to distinguish key text by color, but it is more accessible to do so by typeface. Consider italicizing or bolding text that you’d like to stand out, rather than relying on a difference in color to make your point.
• Use a color contrast checker as you plan your color scheme. WebAIM has an online tool that will allow you to input proposed colors for a color scheme, measuring their level of contrast. UMN shares the standard: “depending on the size and weight of the font text, 3:1 [is the ideal contrast ratio] for normal text less than 14 points, or 4.5:1 for 14-point bold or 18-point non-bold text.”

Does this seem like a lot of information to take into consideration as you craft your brand or organization’s message? It may. But for users who can easily navigate a page they can’t otherwise see, who can get the gist of your message without doubt or loss of fidelity, these overtures matter. We hope you’ll take these tips to heart – and into offices of decision makers and designers – with the goal of making your content available for all to enjoy.

Join 100,000+ fellow marketers who advance their skills and knowledge by subscribing to our weekly newsletter.

WATCH OUR SMWLA 2019 PROMO