Why and How to Create Accessible Social Media and Website Content

Content accessibility isn’t just the responsibility of the design and production team. It’s everyone’s job.

OK. Maybe content marketing doesn’t know to add alt text to images. Maybe a salesperson doesn’t know PDFs need to be accessible. Maybe a graphic designer doesn’t know about contrast beyond complementary colors.

Do you detect a theme here?

I believe the biggest root cause of inaccessibility is the lack of education.

• Schools and colleges need to cover accessibility.
• Companies need to train employees on accessibility.
• Software development needs accessibility in every phase.

Everyone needs to bake accessibility into their processes. Imagine forgetting to add sugar to a cookie recipe. Pouring sugar all over the baked cookies won’t fix it. Talk about sugar shock. The only way to fix it is to start over.

Yet, WebAIM Million says out of one million sites it evaluated, 98.1 percent of home pages had detectable accessibility problems. It would not be surprising if the number is just as high on social media and other digital content.

Why Content Accessibility Matters

The Centers for Disease Control and Prevention says 61 million adults in the U.S. live with a disability. One out of every four adults has some type of disability.

That’s a huge chunk of your audience.

Content accessibility affects more than those living with a disability. For instance, when it comes to captioning videos, most people think it’s for the Deaf and hard of hearing. But it turns out a lot of people with typical hearing use it. An OfCom report says 80% of those who use captions are NOT Deaf or hard of hearing.

What about screen readers? They’re not just for humans who are blind or have low vision. People with processing disorders, learning differences, and focus problems use screen readers.

Besides, anyone can become temporarily or situationally disabled. While playing tennis, I tore a ligament in my right thumb. It required surgery. I couldn’t use my thumb for weeks.

Boy, did I learn just how much a thumb can do! I had to type with one hand. I had to start my car with my left hand. Unlocking doors was an adventure. Though I’m left-handed, I always used my right hand to unlock doors. I tried to use speech-to-text software. It failed miserably. It couldn’t handle my accent that hails from nowhere.

Another possibility. Someone replied to my tweet asking “What should people use instead of ‘Click here.’?” I replied by explaining the problem with “Click here” links and screen readers.

Later, I realized I didn’t answer her question. My brain was tired after a busy day. I thought she had asked *why* “Click here” was a problem. Not *how* to fix the problem.

This happens to a lot of us when we’re tired, stressed, sick, not sleeping well, or in a distracting environment. All of these can cause temporary cognitive disability. And they happen every day.

Finally, all humans have one thing in common: we get older. Thus, aging brings new challenges along the way.

Content accessibility matters because it gives people choices for consuming content.

Accessibility matters because it gives everyone equal access.

And for the biggest bonus that makes the business case: Content accessibility matters because it helps optimize websites for search engines!

What About Overlays?

Before delving into how to make your content accessible, I want to address accessibility overlays. You may have seen the blue circle icon with a neutral person. You may have seen overlay ads reference them as one-line of code accessibility. They promise to ensure your website is compliant with ADA and WCAG.

These sound too good to be true. And they are. They actually put up more barriers to accessibility.

“No overlay product on the market can cause a website to become fully compliant with any existing accessibility standard and therefore cannot eliminate legal risk,” says. OverLayFactSheet.com. This resource has many links to give you the information you need to understand overlays and their impacts on accessibility.

Skip them. Your users will thank you.

How to Make Images Accessible

One of the easiest and most effective things you can do in content accessibility is to add alternative text to your images. It’s often referred to alt text because it’s coded like this:

<img src="imageName.png" alt="image description" />

Img src points to the image file location and name. (File names matter. Use a file name that matches the image.) Alt describes the image for screen readers or when the image does not show up.

What alt text does is describe the image as if the image disappeared. Sometimes people have images turned off or they use a screen-reader app. It’s not just the blind and low vision who use this app. Some people prefer content read to them because it’s easier than reading and other reasons.

Alt describes the image for screen readers or when the image does not show up. Some people may turn off images in their email app. When this happens, the alt text appears. The screen-reader app reads the alt text out loud.

Adding alt text in social media

Social networks like Twitter allow you to enter alt text. If you don’t, the screen reader will say “Image.” So, leaving it blank doesn’t cause the screen reader to ignore it.

On LinkedIn, if you don’t provide alt text, the screen reader will say, “There is no alternative text description for this image.” That’s a lot of information about nothing. And it could be enough to hurt your brand. If it’s decorative, say so. One word is better than a whole sentence reporting there’s no alt text.

If you upload an image to LinkedIn, you can add alt text. But if you link to an external blog and LinkedIn pulls the image, it won’t have an alt text. Yes, even if the blog post has alt text.

As a workaround, include a description of the image in the post. At some point, LinkedIn will fix this feature. Still, it’s a good tip to know in case you run into the same problem anywhere else.

Most content management systems (CMS) and blog applications give you a place to enter the alt text. Designers and people who know HTML can enter the following when the image is decorative:

<img src="imageName.png" alt="" />

Notice there’s nothing in the alt text, but it’s still present with the two quotation marks. In this case, the screen reader will ignore it.

Some social networks will automatically add alt text to images. So far, they’ve been unreliable. A couple of them will tell you their suggestions. Here are examples of alt text à la automation.

Here’s automatic alt text on Instagram. Facebook uses a similar automatic alt text except it omits the name and date. “Person, body of water, and nature” doesn’t touch on the most interesting part about the image.

Talk about general! The automatic alt text suggested “Indoor” for the following image.

In Are bad graphical descriptions better than no descriptions?, Sherri Byrne-Haber says that AI-based identification is flawed and non-existent for decorative images.

You might find plug-ins to help you with alt text. For example, “Twitter Required Alt Text” browser extension replaces the “Tweet” button with “Add Alt Text” until you enter the text.

By the way, search engines like alt text. Anything for SEO, right?

How to write good alt text

First. Don’t be like the jerks who add keywords to alt text. The keywords have nothing to do with the image. They’re trying to pump up SEO.

Step 1. Add it. That’s progress.

Step 2. Write something in context.

Be descriptive yet concise. What’s important about the image? How does it relate to the content? Ask yourself what would you want to know about the image if it doesn’t show up.

Too often, I’ve seen an image filled with a lot of words. For example, an event announcement with the title, time and date, RSVP address, and everything you need to know about the event was in an image.

Someone who relies on a screen reader or has images turned off will not know what it says. Images aren’t made for a lot of text. Put the text into the post. Besides, it’ll make it easier to copy and paste the RSVP contact information. You wouldn’t want people to RSVP to an email address that contains a typo.

Every social network has different length limits for alt text. Just because they allow for 300 or 1,000 characters does not mean you should fill it as much as you can. Be descriptive yet concise.

When images are a link

When the image is also a link, it’s more important for the alt text to describe where the link takes you. For instance, many websites have a clickable logo that takes people to the company’s home page.

Let’s say the logo contains a bear. “Company bear logo” is not a good alt text because clicking it doesn’t take you to anything associated with the bear logo. You won’t find cute polar bears. Or an encyclopedia entry about panda bears. Or bear jokes.

A better alt text would be “Company”.

Now, people know the image will take them to the home page. It’s not necessary to add “home page” as screen reader customers know what it means. Treat linked images as links.

The Problem with Animated GIFs

This is a growing problem on social media and websites. It’s cute at first. But it quickly gets annoying. For some folks, it can be downright sickening.

The guilty party? Animated GIFs. These are short clips that repeat. They’re everywhere: posts, avatars, comments, emails, and presentations.

I’ve posted my share on Twitter. That’s only because Twitter has an Accessibility setting that allows you to turn off autoplay. If you want to see the GIF, select it and it’ll play. Select it again and it stops. Facebook works the same way.

On LinkedIn, turning off autoplay prevents videos from playing. But that’s not the case for animated GIFs. They run endlessly until you get them off the screen.

Flashing, animation, slideshows, and other motions are no joke. They can trigger seizures (photosensitive epilepsy), migraines, and vertigo in people with vestibular conditions.

According to Vestibular Disorders Association, 35 percent of U.S. adults over 40 have some vestibular dysfunction. Wow!

Motion graphics distract people from the content. They’re scrolling and the animation keeps screaming for attention. Just because something is funny, cute, and a trend doesn’t mean it’s a good idea.

How to Optimize Content Accessibility

You’d think the simple act of adding content is hard to mess up. That letters and numbers can’t become inaccessible.

Oh, but they can.

Emojis: How smiley faces can cause frowny faces

An emoji can become a problem. What?! Those cute smiley faces that crack us up? A problem? Noooooo.

Yep. Screen readers read emojis out loud. It won’t simply say, “Smiling.”

😁 is “grinning face with smiling eyes.”

🙏 People use this emoji to mean different things: prayer hands, showing gratitude, and doing a high five. Guess what the screen reader says. None of these.

It’s “folded hands”! Here’s a list of emoji names.

Now, a lot of messages tend to repeat emojis or add a bunch of emojis. I’ve been guilty of this. Ever since I learned this tip, I’ve been careful how I use emojis. Remember, the screen reader speaks the full name of the emoji. Imagine the following line:

It’s party time! 🎉🎉🎉

Screen reader: It's party time. Party popper. Party popper. Party popper.

And it says it with a plain voice. It almost sounds like “Party pooper. Party pooper. Party pooper.”

Imagine what happens if we do this:

Jane 🍕✨😘🌍

Screen reader: Jane, pizza, sparkles, face blowing a kiss, globe showing Europe-Africa

I’ve seen a variation of this next to someone’s name on Twitter. Every time that person pops up, the screen reader will say all of that. And when you change the skin tone of an emoji, it will read out the skin tone. Thus, ✌🏾 is victory hand medium-dark skin tone.

Here’s a real tweet. It looks simple enough. But hit play to watch what happens.

[bg_collapse view=”button-blue” color=”#ffffff” icon=”eye” expand_text=”Transcript” collapse_text=”Close transcript” ]10 countries where teachers are paid the most.
One Luxembourg flag Luxembourg
Two Germany flag Germany
Three Netherlands flag Netherlands
Four Canada flag Canada
Five United States flag United States
Six Australia flag Australia
Seven Ireland flag Ireland
Eight Denmark flag Denmark
Nine South Korea flag South Korea
10 Austria flag Austria[/bg_collapse]

Now that you have an idea of how screen readers handle emojis, you can imagine what will happen if I do this:

Thankfully 🙏 I 🙏 never 🙏 do 🙏 this. (Except here to make a point.)

That would be very bad. Can you guess what the screen reader would say?

Screen reader: Thankfully folding hands I folding hands never folding hands …

You get the idea! It’s hard to catch the thought with folding hands interrupting every step of the way.

Here’s one Slate talks about that happens too often. I have not seen this lately. I may be deaf, but I’m getting screen reader burnout thinking about this one!

“Using Emojis Could Be Excluding People From Your Conversation” shows how they can be misinterpreted and hurt your brand. It’s fine to use emojis. Use them wisely and put them at the end of the content. Screen reader regulars will cut them out if they don’t want them.

#Hashtags

Hashtags are a wonderful thing. They help people tag and find content. But they can also be embarrassing when they’re all lowercase:

#cowboysuk

How do you read that? If you’re like most people, you think “Cowboys suck.” [Pouts.] I love the Dallas Cowboys! Anyway, screen readers say all lower-case hashtags as one continuous word. Here, it’s cowboys-uke.

Change it to camel case and you get #CowboysUK. Aha! That makes more sense now. And the screen reader will say “Cowboys U.K.”

Camel case is using capital letters at the start of each word, initial, or abbreviation.

Here’s another example: #penismighty vs. #PenIsMighty

It’s all too easy to read it the unintended way.

Once, I saw #dreamisreal and I read it two ways: Dream Is Real and Dream Israel. Obviously, the ordering of the “a” and “e” clarify which one it is. But not everyone will realize it. It’s much easier to figure it out when it’s #DreamIsReal.

Most public school districts use ISD to represent the independent school district. Whenever Plano ISD calls me, caller ID says it as a screen reader would as “Plano-ees-d.” Change it to PlanoISD and they’ll say “Plano I.S.D.”

Take care in using a ton of hashtags at the end of a post. Remember the screen reader is going to read ’em out: Number this. Number that. Number here. Number there.

That’s right. The screen reader may say “number” instead of “hashtag” and every single time. Some apps have a setting to change # to “hashtag,” so it will say that instead. Screen reader users don’t all use them the same way or customize them.

Hashtags are great. Just be judicious with them.

The <title> problem: Which tab do I want?

When you have a bunch of tabs open, how do you know which tab you want to look at? Most likely, you look at the names on the tab. OK, here are three tabs from different pages on one website.

They all start with the same thing. Many websites put their company name or important keywords first in the page title. Then, you don’t know which tab is on which page. The first thing the screen readers read is the title of the page. It appears under <title=”Title of page”> in the page’s HTML.

Front-load the title with the words that describe the page. You can add the company name to the end of it.

Use headings for structure, not formatting text

<Title> is also the header of the page, which is <h1> in HTML. Some people use <h1>, <h2>, <h3> to format the content the way they want. Headers provide structure for the page.

Remember those outlines you did in school?

A. Fruit
             1. Apples
                         a. Gala
                         b. Honeycrisp
             2. Oranges
B. Vegetables

And so on. Headers on web pages work the same way except they use H1 – H6 like this:

<h1>Fruit</h1>
             <h2>Apples</h2>
                         <h3>Gala</h3>
                         <h3>Honeycrisp</h3>
             <h2>Oranges</h2>

Like an essay outline, headers help scanners and screen readers get the lay of the land. A WebAIM screen reader survey asked people who used screen readers how they prefer to find information on a long page. Almost 70 percent of the respondents prefer headings. Be selective in how you use headings. Too many can weigh down the screen reader.

One of the most common mistakes is using bold to create headers instead of <h> header. When this happens, the screen reader won’t be able to navigate the content as there will be no shortcuts.

Think about it this way. You land on a long article. Rather than reading word-for-word, you scan the headers. That’s what H1 – H6 does for screen readers. Without them, the screen reader will read the entire page.

Another benefit of using headers? SEO! Yes. Words that appear in headers weigh more than headers that are bolded without using H1 – H6.

Links: Is this a link? Which one do I want?

I remember a trend when web designers removed the underline from links. That was a nightmare for scanners. Heck, it was a nightmare for readers. You couldn’t find the link as you had to depend on color. And the color didn’t always stand out from the content.

Besides, 1 in every 12 of the male population has colorblindness according to the National Institute of Health. Relying on color for links can be a problem for people with dyslexia, processing disorders, and other disabilities. An underlined link is easier to find.

It’s also helpful to use a different color with a strong contrast to identify visited links. I can’t tell you how many times I revisited links. I couldn’t remember if I had clicked them. The visited link color lets me know where I’ve been.

Now that you can find the links, the next step is to make sure people know which one they want. How many times have you seen multiple links on a page that say “Read more,” “Click here,” or “Learn more”? I bet most of you are raising your hand.

Here’s the problem with “Click here,” “Learn more,” “Read more,” and other similar phrases. This next image shows a screen reader. The list of links contains many duplicates. Two of everything and at least four “Learn more” links. Where is the first “Learn more” going to take me? The second? Which one do I want?! Links need context. The screen readers don’t read the link URL, only the linked words.

Remember the bear logo example? That’s what’s happening here.

In the previous image of a web page, “Emergency Services” and “Learn More” are clickable and go to the same place. Keep it simple. Dump the “Learn More” and avoid duplicate names.

The best way to learn is to use a free screen reader. I use NVDA because it captions the screen reader. Check the names of the links on your web pages. Do they make sense? Do they tell you where you’ll land if you click?

And the last tip. Don’t open links in a new tab or window. Yes, you want to keep people on your website. However, it confuses screen readers. If they want to go back, they’ll use the back button.

Play it safe with colors

We’ve talked about taking care with link colors. The next thing is to limit depending on color to convey information. One of my teams relies on web-based project management software. I color-coded different cards. Grey represented a blog post, pink referred to templates, and so on.

The only people it matters to are the three of us who manage the projects. I would not have used color alone if anyone couldn’t differentiate the colors. We can work around it by capitalizing BLOG, TEMPLATES, and so on.

The other challenge with colors is contrast. An ugly trend has shown up on many websites. They have light backgrounds and use a shade of grey for the text color. This is like reading in a fog. I tend to leave the website. Many sites still commit this crime.

Many free tools can check the contrast on a page or graphic. Here are a few:

• Colour Contrast Analyzer Tool
• WebAIM contrast checker
• Color Blindness Simulator

My redesigned website had a white background with black text. A colleague said the white was harsh. I can relate and couldn’t believe I overlooked it. Right away, I changed the background to a gentle grey. It passed the WebAIM contrast checker.

Fancy Fonts

Have you seen those fancy fonts in a social media post? That’s because the writer has used a Fancy Font Generator to create it. You enter the text you want to bold or change. And the tool generates many variations as the following shows. I entered “This is a font generator.” at the top. The same sentence appears below in a bunch of different styles.

You select “Copy” and paste it wherever you want. Here are examples that show the same phrase in three different fonts.

Block font: 🇫‌🇦‌🇳‌🇨‌🇾‌ 🇫‌🇴‌🇳‌🇹‌ 🇬‌🇪‌🇳‌🇪‌🇷‌🇦‌🇹‌🇴‌🇷‌

Double struck font: 𝔽𝕒𝕟𝕔𝕪 𝕗𝕠𝕟𝕥 𝕘𝕖𝕟𝕖𝕣𝕒𝕥𝕠𝕣

Handwriting font: ℱ𝒶𝓃𝒸𝓎 𝒻𝑜𝓃𝓉 𝑔𝑒𝓃𝑒𝓇𝒶𝓉𝑜𝓇

Unfortunately, these are not accessible to screen readers. The screen reader reads the name of the font in regular text. And then goes silent.

Even if the screen reader could read these fancy fonts, it will make it harder for some people with reading disabilities. These add friction to the reading experience for some. In a LinkedIn conversation, Bruce Bates mentioned that screen readers have settings that may make it possible to read Unicode like this font generator uses. I asked accessibility experts about it.

Glen Walker reminded me of the settings in the screen reader. I checked out the document settings in NVDA and played with it. Then, I’d test it with the font generator. I was getting so frustrated because the speech viewer (captions) wasn’t matching what my bionic ear heard. I can’t tell you what a screen reader says without the speech viewer, but I can match what it says if the speech viewer shows it.

According to Priti Rohra, JAWS says the Unicode character value. Maybe this is what NVDA was saying. Then Rae Benedetto chimed in and said the problem is the Unicode mapping. Rae created a sample PDF using a “font generator” font and viewed it in Axes PDF’s Unicode editor. The characters are not mapped to standard alphabetic characters that a screen reader would recognize.

For example, the Unicode map shows a 🇧 mapped to another 🇧 instead of B. Hence, the screen reader can’t read 🇧 like it can read B as the following image shows how it maps a glyph to a character in unicode. In short, these font generator tools are not accessible to screen readers and people with reading disabilities. It may be better to find another way to emphasize a word or phrase with an *asterisk*.

 

Italics

It’s not just fancy fonts that are a problem.

While screen readers can read words in basic italics (not in a fancy font), italics are also a problem.

It’s OK to italicize a word or two for emphasis or to identify titles of books, TV shows, and newspaper publications. They’re not meant for entire sentences or paragraphs.

WCAG Guideline 3.1 advisory technique says “avoiding chunks of italic text.”

WebAIM says: “Do not use italics or bold on long sections of text.”

People with reading and vision disabilities struggle with italics. The same goes for centering text.

Text Alignment

I remember websites of the early ’90s. Many of them centered everything on the page. Center alignment isn’t cool anymore. It moves the content to the middle of the page instead of starting at the far left. (Or the far right for languages like Hebrew that read from right to left.)

In reading digital content, I’m seeing a problem crop up a lot. Even in the content from accessibility-forward companies and supporters. They’re centering headlines, headings, or content that take up more than two lines.

I’ve also seen entire pages centered. Centering adds friction to the reading experience. It can affect people without disabilities.

It’s because the starting point for each line varies. The eyes and brain work harder to process and find the next line than they do when the starting point is the same.

WCAG success criterion 1.4.8. visual presentation  (Level AAA) says:

“For the visual presentation of blocks of text, a mechanism is available to achieve the following … text is not justified (aligned to both the left and the right margins).”

“Blocks of text” refers to “more than one sentence of text.”

There’s nothing about centered text. Yes, the omission could mean that it’s OK. However, I view centered text as bad as justification. It changes the physical layout of the lines. Therefore, it creates friction.

Here’s Jared Smith‘s tidbit about centered text from a talk on Accessible Typefaces, Fonts, and Text.

You can still put the headline or heading in the middle of the page. The key is to left-align the content if it’s at least two lines long. I recommend doing the same for quotes that are more than one line. Yes, even though they’re often short.

I don’t have a reading or vision disability (aside from nearsightedness). Yet, I feel the difference in reading centered text vs. left-aligned text in the center of the page.

Give it a shot. The next time you write text, try left alignment and center alignment.

Left-aligned text is the easiest to read. The starting place of each line is the same. The centered paragraph shifts the starting place. In short, it adds friction to the reading experience. Err on the safe side and skip centering.

What about justified text? This is where the text on both sides is flush against the margin. The paragraph looks like a perfect rectangle. Except, to create this effect, the text is stretched out by inserting extra spaces. Full justification is also a problem.

It adds rivers of uneven white space, which hurts the reading experience. The eye can get lost with no guidance from the ends of the lines. It may work well in print, but it doesn’t in digital content as they can have awkward huge gaps in the lines. While white space can be a good thing, it’s not when the text looks uneven and patchy.

For languages read from left to right, stick with the default left justification for text. There’s a reason it’s a default in many instances.

Adding bold to words or phrases that aren’t headings

Now for the tricky one: bold. This is fine for headlines and headings. But some people will bold an entire sentence. I know they’re trying to tell the reader, “If you’re going to scan this, here’s what’s important.”

Except … if the reader wants to read more of it, it can be distracting. I don’t have ADHD and I find my eyes keep gravitating to the bolded text instead of reading what’s before and after it.

And I’ve seen entire paragraphs and pages in bold. This is not a good reading experience. It’s heavy on the eyes. Like italics, bold is best for headlines, headings, occasional emphasis, and bulleted lists with a word or phrase.

Short paragraphs and bullets

An important scanning feature is short paragraphs with blank lines between each. It’s hard not to lose your place in reading long paragraphs.

Another effective way to support scanning and add a little white space is with bullets. I love a good bulleted list. The line before the bullets tells you what it is and then boom, boom, boom, the bullets give you the points. The rule of thumb is to use three to five bullets and keep them as short as possible.

Trade $5 words for 50-cent words

And the last bit of advice on creating accessible and readable content keep it simple. Write shorter sentences. Trade pretentious $5 words for 50-cent words.

No one will be impressed with a writer who opts for “utilized” instead of “used.” Or “ameliorate” over “improve.” Skip the jargon. Cut the clichés. Dodge the fancy words.

In fact, a study on plain language has shown that the more educated the person is, the greater the preference for plain language. And besides, we all experience cognitive impairments every day. When we don’t sleep well or we’re stressed, it affects our cognitive functions. Plain language helps us absorb the content with less effort than fancy language.

Creating Accessible Video, Audio, and Podcasts

When it comes to media, the first rule is to never autoplay. There’s nothing like opening a new tab behind the current tab and moments later, sound blares through the speakers. That’s because the video automatically played at full volume.

Also, avoid auto-playing slideshows, sliders, and any kind of motion like scrolling text. They can be a problem for people sensitive to motion. They also distract from the content.

And some videos don’t have a player, volume controls, or a start / stop button. Let the viewer be in control of the video and audio. The more control you give users, the better the experience. If they miss a point, you want them to be able to back up and catch it again.

Speaking of a missed point, they could be missing it because of bad quality audio or they’re having trouble catching what the speaker says. Captions to the rescue!

When encouraging people to caption, most focus on two reasons: accessibility and second language learners. That should be enough, right? Alas, it’s not.

Furthermore, creators may think their audience doesn’t include deaf people or it’s too small to bother. But they will change their minds after hearing a few facts.

First, 80 percent of those who use captions are NOT deaf or hard of hearing. So, you reach far more people with captioned videos. Also, recent surveys reveal more and more people are turning off sound for many reasons. The list of reasons for captioning videos is long and many of them have nothing to do with disabilities.

So, caption those videos.

Captioning a video requires two parts:

• Video
• Caption text file

The caption text file tells the video when a caption should show up and disappear. However, some social media networks like Instagram and Twitter don’t allow you to upload a caption file with the video.

And that’s why it’s important to know the difference between open and closed captions. That caption text file I just mentioned? Closed captions use that file. It gives the viewer almost complete control over the captions. They can turn the captions on and off. They can change how the captions look depending on the platform.

Annnndddd [Drum rolls] search engines love caption files. They read it. More SEO juice for your website!

But if you can’t upload a caption file on Twitter and Instagram, what should you do? Add open captions to your video. Because open captions are burned-in or glued onto your videos, you only have to upload one file. The captions will show up no matter what.

For times when you have a choice, closed-caption is the better option because it gives viewers more control.

And if you have a Zoom account, please go turn on the captions now. The first step can’t be done in the meeting. It has to be done before the meeting.

Audio descriptions and transcripts

A video that contains meaningful visuals will most likely need an audio description. It’s sometimes referred to as video description, described video, or AD. It’s a description of important visual elements in a video.

One way to do this is to use YouDescribe. It’s a free website and app that provides AD for videos. You can add your video to the wish list and a volunteer may add AD to it.

And finally, provide transcripts for videos and podcasts. Some folks like transcripts because they allow you to scan the content without playing the entire video or podcast. If you post your captioned video on YouTube, it automatically generates a transcript based on the captions.

SEO comes to play here with transcripts. Search engines read transcripts. You can see the transcript for the emoji video by pressing the button to expand it.

The next time you publish your captioned video online, add #Captioned. It helps people find captioned videos and skip the ones without captions.

Stay Vigilant with Content Accessibility

Content accessibility isn’t a project. It takes one mistake to undo the hard work. Accessibility is continuous. Your website may pass all the accessibility tests today. But anything could happen tomorrow. For instance, someone publishes a new blog post with an image without adding alt text.

That’s why accessibility needs to be baked into many processes. The marketing department that’s responsible for publishing blog posts will have a process to remind publishers to add alt text, captions, audio descriptions, and transcripts.

The sales department creates PDF files to send to prospects. Their process will include the steps for ensuring the PDF is accessible.

A process for graphic designers will have a step to ensure the image passes the contrast test along with any others to create an accessible image.

Accessibility is everyone’s job. Accessibility takes time to learn and bake into your processes. Don’t stress over perfection. Focus on progress instead of perfection.

If a company cares about accessibility, then the executives need to buy in and support it. Here’s a way to make the business case. Search engines reward websites with accessible content. Wouldn’t you say it’s worth it?

Resources

• Accessible Social: Fantastic resource on creating accessible social media from my friend Alexa Heinrich.
• Accessible Typefaces, Fonts, and Text with WebAIM’s Jared Smith.
  
• Complete Guide to Captioned Videos: Everything you wanted to know about creating high-quality captions.
• OverLayFactSheet.com explains what overlays are and the problem with using them.
• YouDescribe: Free website and app that provides audio descriptions for videos.

Accessibility Content Training for Marketing and Content Creators

Want to ensure your marketing department, communications, and content creators create accessible content? Contact me about training or speaking to them about content accessibility. Not ready for that? Sign up to receive piping hot content you can use.