Accessibility in Digital Marketing: Be an A11y

TJ Kelly

4 out of 5 Americans can consume your marketing without accessibility concerns. But what about that 1 in 5?

19% of Americans have a disability—56 million people, according to the US Census.

Does your digital marketing exclude every 5th user?

Digital Marketing Accessibility A11y: Topics.Be an A11y: Embrace and embed accessibility & inclusivity in all your digital marketing—on your website and off.

Far too much marketing content is published without accessible features or adaptations.

That renders most of that content out of reach or unusable by more than 50,000,000 Americans (and untold millions worldwide).

It’s time for that to change.

We’ll cover 2 topics in this post:

  • Why — Motivation & philosophy behind the #a11y methods, tools & tactics.
  • How — Action items & tools to implement #a11y concepts in your marketing content.

This article is far from exhaustive, but we hope that it serves as an early step in a journey that businesses needed to make a long time ago.

Let’s dive in.


Digital Marketing Accessibility A11y: Why?

Why? Motivation behind Digital Marketing Accessibility

Let’s look at the why. What are the core reasons that accessibility in marketing are important?

We all know the talking points, but what’s it all about?

Abilities & Barriers

Digital Marketing Accessibility A11y:Abilities & Barriers.A brief look at the abilities and barriers we’ll discuss in this article, as defined by WCAG.

  • Visual Abilities
  • Auditory Abilities

Visual abilities and disabilities range from mild or moderate vision loss in one or both eyes (“low vision”) to substantial and uncorrectable vision loss in both eyes (“blindness”).

Auditory abilities and disabilities range from mild or moderate hearing loss in one or both ears (“hard of hearing”) to substantial and uncorrectable hearing loss in both ears (“deafness”).

The WCAG also discusses cognitive, physical, and speech barriers. But for the purposes of this article, we’ll be focusing on Visual and Auditory.

Audio/Visual Digital Consumption

Images, videos & text — these are the content formats that comprise the major digital marketing networks:

  • Facebook
  • YouTube
  • Instagram
  • LinkedIn
  • Twitter
  • Pinterest
Digital Marketing Accessibility A11y: Social Networks.

Most major social platforms are built on audio/visual content.

But format matters. Audio, video, and even static graphics are content formats.

Content needs a Text foundation.

Content needs a text foundation.

All these formats should have a text foundation.

Why?

Because text connects the formats together. Users and assistive technologies can translate text into any other format (speech, visual, etc).

Text is adaptable, and accessible.

 

How to improve Accessibility in Digital Marketing.

How to improve Accessibility in Digital Marketing.

How? Tactics for Digital Marketing Accessibility

Let’s look at 6 of the world’s major social platforms and evaluate their accessibility features.

This list is not exhaustive, but it should help get marketing teams started on a path toward a more accessible, inclusive marketing program.

 

Instagram Image Accessibility Header.

Instagram Image Accessibility

Instagram is mobile-only, of course. That in itself can be an advantage in accessibility terms, as many mobile devices have excellent assistive functions built in.

When posting a photo to Instagram, find the Advanced Settings menu, toward the bottom of the Post screen.

In there, you’ll find a “Write Alt Text” option. Tap that, and you’ll have the chance to provide your own 100-character alt text.

Instagram Image Accessibility & User Hashtags.

Some Instagram users improve accessibility with hashtags.

Beyond that, some unofficial accessibility methods have emerged from users.

The use of hashtag is a bonus! It allows users to connect with each other and find other content tagged with the same topics.

 

Instagram Video Accessibility Header.

Instagram Video Accessibility

Instagram videos lack accessibility functions like subtitles.

Instagram videos lack accessibility functions like subtitles.

There is no official video subtitle method on Instagram. Subtitles have to be “burned” into videos before posting. 😧

This is especially surprising given Facebook’s ownership of Instagram.

If the method exists on Facebook, why not extend it to Instagram too?

 

Facebook Image Accessibility Header.

Facebook Image Accessibility

Facebook’s image alt text options are only accessibly on desktop. Photos can be posted via mobile and later edited via desktop.

To add alt text on Facebook images:

  • Hover over image preview.
  • Click “Edit Photo” icon Facebook Image Accessibility
  • Click “Alt Text” from menu
  • Facebook’s AI automatically generates Alt Text.
  • It’s not always right :)
Facebook image accessibility alt tag editing options.

Facebook image accessibility alt tag editing options.

No alt text options on Facebook mobile app (iOS).

  • Alt Text can be added after posting (via web interface)
  • Buried on permalink page 😟
  • Hidden on an overlay

One method for working around the desktop-only limitation is to leverage your team.

One person can snap and post pictures from their mobile device (at an event, for example). And a second person (back at the office, maybe?) can edit the alt text on their desktop computer.

This method is less than ideal, but it may a reality for many agencies and marketing teams.

 

Facebook Video Accessibility Header.

Facebook Video Accessibility

Facebook video accessibility options on desktop.

Facebook video accessibility options on desktop.

Captions

  • Auto-transcribe
  • Manual transcribe

SubRip Subtitle (.SRT)

  • DIY custom SRT file
  • 3Play & other services

3PlayMedia describes when to use verbatim captions or subtitles in videos.

Closed Captioning Best Practices for Media and Entertainment:

For broadcast/scripted media, transcribe content as close to verbatim as possible…include every “um,” every stutter, and every stammer because they are intentionally included.

There is more leeway for unscripted reality shows, documentaries, and news broadcasts, because the filler words are usually unintentional and irrelevant.

So, to recap: Should your subtitles be transcribed verbatim?

  • Scripted dialog — Yes
  • Unscripted/Live — No

In most cases, the default will be no, which provides even more opportunity to write custom, sculpted content to accompany your video or audio content.

 

Twitter Image Accessibility Header.

Twitter Image Accessibility

Twitter Image Accessibility Mobile.

Twitter Image Accessibility Mobile.

Desktop

  • Click “Edit” button, on the image.
  • Click “Alt” to find the Alt Text field.
  • Type your conspiracy theory Alt Text.

Mobile

  • Tap “Add description” button, on the image.
  • Type your conspiracy theory Alt Text.
  • Read & confirm your conspiracy Alt Text.
  • Conspiracy Alt Text is hidden once tweeted.

 

Twitter Video Accessibility Header.

Twitter Video Accessibility

Twitter Video Accessibility Example.😢

Possible, but difficult

  • Only via Media Studio (invite-only)
  • Or via API
  • (Or in Twitter Ads)
  • Regular users??

Alternatives popped up

  • EasyChirp reads from Twitter
  • Still no help with video
  • Features are educational for publishers!
    • Long descriptions
    • Keyboard functions
    • Simple layout
    • Proper headings
    • Ajax alerts, etc

 

YouTube Video Accessibility Header.

YouTube Video Accessibility

YouTube Video Accessibility Screenshots.

YouTube Video Accessibility Screenshots.

YouTube provides excellent accessibility options and functionality. Credit to Google for this one!

Here’s a quick list of the steps involved in editing and improving your YouTube videos’ accessibility with captions or subtitles.

  • YouTube Creator Studio
  • Subtitles/CC option
  • Upload SRT file
  • Transcribe manually
  • Automatic subtitles
  • Better than nothing
  • Good starting point—EDIT!

 

YouTube Image Accessibility Header.

YouTube Image Accessibility

¯\_(ツ)_/¯  I got nothing.

There appears to be no way to add custom alt text to thumbnail preview images on YouTube.

That’s likely because YouTube uses the video’s title for relevant accessible text.

A note on YouTube in general

Screenshot of YouTube's empty Alt Text attribute in the website's rendered source code.

Screenshot of YouTube’s empty Alt Text attribute in the website’s rendered source code.

YouTube, and most Google products in general, are typically very strong in accessibility terms.

If you use your web browser’s developer tools to inspect the compiled source code of the default YouTube.com web interface, you may be surprised to see empty alt attributes in their <img> tags.

I was.

But don’t be fooled into thinking YouTube is lacking replacement text on thumbnail preview images.

 

LinkedIn Image Accessibility Header.

LinkedIn Image Accessibility

LinkedIn Image Accessibility Screenshots.

LinkedIn Image Accessibility Screenshots.

LinkedIn provides the standard compliment of image accessibility and Alt Text options.

When you upload an image to share it on LinkedIn, you’ll see an option at the lower-left of the modal window.

Click that “Add alt text” button, and you’ll have the chance to provide up to 120 characters of alt text.

That text will be read by screen readers and other assistive technologies, but is not displayed visually on the web or LinkedIn’s mobile apps.

 

LinkedIn Video Accessibility Heading.

LinkedIn Video Accessibility

Screenshot of a "Dear LinkedIn" Open Letter.LinkedIn requires you to upload your own custom .SRT file. There is no option to manually add your own timestamped captions or subtitles on LinkedIn videos.

Hopefully that feature is coming! It has become standard on Facebook and YouTube videos, so it’s reasonable to assume that LinkedIn will follow suit.

Let’s hope so!

Especially since this compelling open letter to LinkedIn was circulated: Dear LinkedIn, Blind People Job Search, Too.

 

Pinterest Image Accessibility Heading.

Pinterest Image Accessibility

Pinterest Image Accessibility.

Pinterest Image Accessibility.

  • Pinterest is different.
  • Alt text comes from source page title.

There are some wordpress plugins and other hacks that let website owners customize the text pulled by Pinterest, but consumers still have no edit options.

This is sorta the way Pinterest is designed to function, so that might be the end of this topic!

All in all, Pinterest’s alt text/accessibility aren’t bad or lacking—they’re just not customizable either.

The problem lies with the difference between a page title’s function and an image alt text’s function. They serve different purposes.

Therefore, what helps users in a page title may not help users when it’s used for alt text.

Help us out, Pinterest! Edit options, please!

 

Pinterest Video Accessibility Heading.

Pinterest Video Accessibility

  • No video caption/subtitles (probably coming, videos are new).

Nothing to say on this one. We’re just 100% out of luck with Pinterest videos.

Again, we hope that will change. But for now, there’s nothing we can do.

 

Google Slides Accessibility Functions.

Google Slides Accessibility Functions.

Google Slides Accessibility Options

Digital Marketing Accessibility A11y – 38 Google Slides Accessibility ScreenshotsEnable and utilize A11y functions in Google slides like Alt Text, and many others.

Credit to Google for building in lots of excellent assistive methods to their products.

 

The End.

The End.

Where to add #a11y text

Just about everywhere.

  • Website (duh)
  • YouTube
  • Facebook
  • Instagram
  • Twitter
  • LinkedIn
  • Pinterest
  • Snapchat
  • TikTok
  • VSCO
  • Flickr
  • Vimeo
  • VK
  • SoundCloud
  • Medium
  • Podcasts

 

Digital Marketing Accessibility A11y – 42 Accessibility Mantra

Access is not an afterthought.

Related Posts
Website Launch and Rebranding for premiere point-of-purchase display company: New England Wire Products
10 Conversion-Boosting Tips for 2017
Online Marketing Ideas to Grow Your Dental Practice