One trend I’ve been following the last several years is the continued increase in lawsuits over website accessibility.
The big challenge right now is that there are conflicting legal standards. And so for some businesses, there is no clear-cut answer of if legally you do/don’t need to assure your website is accessible.
- the First, Second, and Seventh Circuit Courts of Appeals say that a website doesn’t have to have a connection to a physical location to require accessibility
- the Third, Sixth, Ninth, and Eleventh Circuit Courts of Appeals say that a website must have a connection to a physical location to require accessibility
- a recent California court decision in the Bay Area (that is within the Ninth Circuit) said if you are an online-only business with no physical location, your website must be accessible
- the DOJ has issued guidance stating that its position is that all websites available to the public must meet WCAG 2.0 AA standards
In 2017, Congress attempted to modify the Americans with Disabilities Act so that there was a nationwide standard. And while the bill passed the House, it stalled out in the Senate.
A new version of this bill was introduced in Congress in October 2020 by Rep. Budd (R-NC) and Rep. Correa (D-CA) called the Online Accessibility Act. And while it’s unlikely this bill will pass before the end of the term, it wouldn’t surprise me if we see a version introduced in the next term.
However, regardless of if/when Congress or the Supreme Court set a nationwide standard, I think it not only good business practice but our ethical duty as business owners, to make sure that our websites are accessible to everyone.
So I encourage you to focus on increasing website accessibility in these five key areas:
- Use alt text for all images
- Update video/audio content to include closed captions and/or audio descriptions
- Check the color contrast of your website
- Create forms that are accessible for screen-readers and that they can be navigated using just tab and enter
- Create short descriptive link text
Action Item #1: Use Alt text for all images
Alt text (alternative text) is about 125 characters long and is used to provide information about the content of the image for:
- those who are visually impaired and are using screen readers
- the robots that crawl the internet (AKA Google search bots)
- those who for whatever reason the image doesn’t load in their browser
And there’s an art to creating successful alt text because you need to be concise, descriptive, and ideally insert a few of those SEO keywords you are hoping to rank for.
So your first action item is to audit your website to determine which images you need to create or update the alt text.
BUT…alt text should not be the Pinterest description
For years I’ve seen one piece of advice repeated over and over on hundreds of blog posts. And this advice is that your Pinterest description should be added as your images alt text.
And this advice does a disservice not only to your website visitors that use a screen reader but to your SEO ranking.
As we discussed above your alt text is displayed anytime someone visits your website and they either are using a screen reader or the image doesn’t load.
So by merging the two of them together, you are doing both a disservice.
Your alt text descriptions don’t make sense because they aren’t related to the actual content of the image or get cut off because they are too long. And your Pinterest descriptions are too short and missing the keywords and other SEO terms that you want to use to rank successfully on Pinterest.
FYI: If you have a WordPress site Social Warfare Pro makes it super easy to customize the default text and image used when your website visitors share to more than a dozen platforms. I find it a steal for $29/year. Learn about Social Warfare.
Action Item #2: Update video/audio content to include closed captions and/or audio descriptions
The #1 reason you should update your video content is to make it understandable for those with impairments. If you want your brand to be accessible, then captions and audio descriptions are a must-do.
But these things also make your video content easier to understand for those without impairments.
For a while, there’s been a statistic floating around that says that 85% of Facebook videos are watched without sound. And a more recent survey backed that up, stating that 92% of mobile viewers watch with the sound off and 83% overall don’t watch with sound.
So captioning video content helps everyone and makes it more likely that they’ll watch the video you spent all that time creating.
You might be familiar with captions, but did you know that there are two kinds?
- Open captions are on the screen for all viewers and can’t be hidden.
- Closed captions are hidden by default but appear on the screen with a click of a button.
This distinction is important because some services (like Instagram) currently don’t have a closed caption button. So for those platforms, you have to create open captions.
Here are some of the video caption tools I’ve tried and liked (although not all of them I currently use):
- Clips is pre-installed on your Apple device and allows you to record a video and it’ll create open captions of what you say. I’ve used this for quick welcome videos for new members of the artist’s Courtyard and for Instagram stories. The downside is that it only records in square format.
- Cliptomatic is a paid Apple app that lets you create open captions of videos you record in the app. Since you can record in Square or Full mode, it’s great for Instagram stories.
- If you need to caption a video already recorded for social media, I’ve used Headliner to create open captions.
- Most videos uploaded to YouTube and Facebook will automatically have closed captions created within an hour. These captions can be corrected and downloaded so you can use them on other platforms (e.g. videos uploaded to Vimeo) and so you can create a written transcript for those that want to read instead of watch.
- You can upload the audio track of your video to the Watson Speech to Text tool and then correct and paste this transcript into the YouTube captioning tool to sync it with the video and created closed captions. (I’ve found this tool to be slightly more accurate than the auto YouTube captions.)
- If you’d rather not spend a bunch of time correcting captions, Rev offers captioning services for $1.25/minute. And you can just provide them the Vimeo/YouTube URL rather than uploading the file to them and usually within an hour have a caption file. (They’ll even upload it to your video for you!)
- Facebook Live has rolled out closed captions to live broadcasts. Learn how to turn on Facebook live captions.
- If you host live meetings, I was part of the Rev + Zoom beta program to test live captions and it was so successful that I signed up for the paid version of Rev live captions when it launched. One reason I like it over the Google Meet live captions is that the live captions are automatically saved, so they can be corrected and uploaded for the replay.
One final note, with all of the auto-captioning services, I can’t emphasize enough how important it is to correct the captions. You’ll need to fix things like run-on sentences, replace homonyms, and correct very obvious errors. You shouldn’t just post the auto-captions without reviewing and correcting them.
When we think about making video accessible, we often end with creating captions.
And captions are great to help those with hearing impairments, but videos also are challenging for those with visual impairments.
To help them, we think about making sure that the on-screen actions, text, and setting are described, using audio descriptions.
Audio descriptions are the practice of verbally describing all of the relevant visual information happening in the video. One way to think about it is to pretend that rather than a video, it’s a podcast and to make sure that it still makes sense and is understandable.
While audio descriptions can be added after the fact, there’s a ton you can do to add context and description while you are recording your video (thus removing the need for a separate audio description track).
- When recording a video with text-based slides, make sure you incorporate the exact words on the slides into your presentation. (I tend to make the slide overlays after the fact, so I can incorporate the exact words I used!)
- When recording a video with image-based slides, b-roll, or overlaid images, make sure you describe what the images are.
- When recording a knitting tutorial, rather than saying “Bring the yarn around the needle like this”, say, “Holding the yard in your right hand, bring the yarn around the needle from back to front in a counter-clockwise motion.”
- When recording a talking-head video, start off by introducing yourself and stating where you are.
Learn more about creating audio descriptions for new (or previously created) videos.
So your second action item is to audit your videos to determine which ones don’t have captions and which could benefit by being re-recorded so that you have audio descriptions.
What should you do if you have hundreds of videos that need updating?
I’d suggest that you prioritize first in creating a workflow so that all new video content is being made with captions and audio descriptions.
Then I’d take your existing videos and sort them based on recent views. Older videos that only have a handful of recent views can be held off on (or maybe even taken down). While videos that recently have had quite a few views should be tackled first.
Action Item #3: Check the color contrast of your website
According to whocanuse.com only 68% of people can distinguish all three primary colors with little to no blurriness. So you should make sure that there is enough contrast to allow the remaining 32% of people to view your website text.
This also helps those who stare at a screen all day (which really is all of us!)
According to WCAG standards, there should be a minimum contrast ratio of 4.5:1 between the background and your text.
So your third action item is to check the contrast between your website’s background and text.
Note: It can be hard to pick both a text and link color that contrast strongly with your background and are easily distinguishable from each other. Which is why I also underline links to provide an additional indicator of which text is a link.
Action Item #4: Create accessible forms
Many contact forms can’t be read or navigated through by screen readers.
So your fourth action item is to see if your forms can be:
- Navigated using only the tab and enter keys on your keyboard
- Use aria fields so that screen readers understand what is expected in the box.
There are many accessible form builders out there, including the one I use, Gravity Forms!
Action Item #5: Create short descriptive link text
When thinking about links and screen readers, there are three important things to keep in mind:
- When a screen reader encounters a link, it says link and the reads the linked text (so there’s no need to include “link” or “website”)
- Screen readers create an alphabetized list of links to allow users to quickly jump to the right link (so “more” or “click here” links are useless out of context)
- Users can select the right link by saying, “Click” and then the linked text (so shorter links are better)
And when you take these three things together, it means you should create concise link texts that provide context.
You can learn more about creating meaningful links in this USF article.
Like the second action item, this fifth action item of auditing and updating links can be a doozy, because you probably have hundreds of links on your website!
Like I suggested previously, my process is that I’ve added it to my pre-publish checklist, so that all new content automatically has short, contextual text links. And then I’m slowly updating past posts based on last quarter’s most popular content, so that slowly but surely, I can update the hundreds of posts I have here.
Danger Will Robinson: Plug-ins aren’t a magic bullet
While there are some great plug-ins and tools out there to help you make your site more accessible, they aren’t the end all be all.
None of them will make your site 100% WCAG complaint. (And in fact while most of them promise this in their marketing, their TOS say otherwise.)
These tools cannot solve problems like:
- Unclear link text
- Incorrect heading order
- Lack of form labels
And they often introduce redundancies, slow down your website, and make decisions that impact your branding and color schemes.
So while they can be one accessibility tool, you can’t quickly install something and have your site magically fixed. You’ll still have to assure that the underlying code and page content allows for an accessible website.
Which of these five have you already done on your site? Which of these five will you tackle next? Share your thoughts in the comments.