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
- What About Overlays?
- How to Make Images Accessible
- The Problem with Animated GIFs
- How to Optimize Content Accessibility
- Creating Accessible Video, Audio, and Podcasts
- Stay Vigilant with Content Accessibility
- Want More Content Like This?
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. A Verizon Media and Publicis Media report says 80 percent 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.
Social networks like Twitter allow you to enter the 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 an 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.
Talk about lazy! 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
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, 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 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 animated 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’re 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 for 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.
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:
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.
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 are a wonderful thing. They help people tag and find content. But they can also be embarrassing when they’re all lower case:
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.
Most public school districts use ISD to represent independent school district. Whenever Plano ISD calls me, caller ID says it like 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.
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 which page. The first thing the screen readers read is the title of the page. It appears under <title=”Title of page”> in 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 headers 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. Topic 2
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.
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 limited color vision 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:
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.
Hodgepodge: White spaces, bullets, and $5 words
Text alignment matters. I remember websites of the early ’90s. Many of them centered everything on the page. Now center alignment isn’t cool. 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.)
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. It creates inconsistent white spaces. While white space can be a good thing, it’s not when the text looks uneven and patchy.
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.
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.
And that’s all she wrote on this topic.
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 autoplaying 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 the 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:
- 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 on to 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.
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?
Want More Content Like This?
Did you like this content? Would you like to know when the next post comes out? Sign up to receive piping hot content you can use.