How Do You Make Video Accessible?

Videos aren’t inherently accessible. Even if the content comes from an outside source — like a videographer or a YouTube channel — you’re still responsible for ensuring that every visitor on your website can fully access it.

Video can serve many purposes for a website:

• Home page videos featuring company founders or illustrated walk-throughs of a solution can serve as a unique welcome to the site;
• Product videos give customers a better look at your inventory which helps in the decision-making process;
• Background videos can be a nice change of pace from otherwise static content;
• Blog post videos can provide readers with an alternative approach to consuming content;
• Video content gives websites better opportunities to rank in search (like showing up under Google Videos or on the first SERP for a relevant “how to” question).

The last thing you’d want is to spend all that time designing your website to be accessible only for the video (which is always a crucial part of the content) to be inaccessible.

Below, we’re going to look at what you can do to make video accessible on your website.

1. Follow Video Accessibility Best Practices

When we talk about how to make videos accessible, what we’re ultimately trying to do is solve two big problems:

1. To enable everyone to consume the content in full;
2. To make it so that everyone can control the playing of the content.

This doesn’t just apply to visitors who have visual or aural impairments either. Accessible videos are useful for people who may be limited situationally (like someone riding the bus home who can watch the video, but not listen to it because they have no headphones).

Here’s what you can do to help all your visitors consume your video content in full:

Disable Auto-Play and Loop

Nobody wants to step onto a website or new web page, only for the video on it to start playing. This is especially so for those who are visually impaired and have to rely on screen readers to navigate them to the controls that turn off auto-playing videos.

So, remember to disable auto-play as well as auto-loop features before publishing a video to your site.

Enable Captions

Captions are basically a script that appears inside your video. So, much like a script for a movie or a play, captions are synchronized annotations that spell out what is heard.

In addition to the speech itself, captions may include things like:

• Titles and chapter names displayed but not spoken aloud;
• Song names or lyrics playing in the background;
• Notes about ambient noises.

There are two kinds of captions you can use. Open captions automatically display whenever anyone plays your video. Closed captions need to be turned on by the person watching the video.

While some video player software may offer to auto-generate captions for you, it’s best to do it on your own. (You’ll see why later.)

Enable Subtitles

For visitors that don’t speak the native language of the video, make sure that subtitles are enabled or that you’ve included them (if you’re preparing your own).

Add Audio Descriptions When Needed

Whereas captions and subtitles capture the audio of a video, they don’t generally describe what’s on the screen. This can compromise visually impaired users’ ability to comprehend what’s going on if there’s something relevant in the visuals (like on-screen text or some sort of action that’s not otherwise described aloud).

So, in addition to captions and subtitles, you might need additional audio descriptions or a separate audio track entirely to complement the video.

Provide a Transcript

Transcripts are a cross between captions and audio descriptions. Essentially, a transcript should capture everything from the video:

• The speech;
• Titles, subtitles, and other onscreen text;
• Descriptions of onscreen activity;
• Links referenced or shared onscreen.

Unlike captions, transcripts usually live outside of a video player — either written on the page in HTML or provided through a link or download. Interactive transcripts are a little different as they attach themselves directly to video players (I’ll show you an example below).

Properly Format Onscreen Text

Even if you don’t or can’t give your visitors the ability to style the onscreen captions, it’s important to carefully consider how your choices may affect their ability to read it, including:

• Text color;
• Background color;
• Video color;
• Text-to-background color contrast ratio;
• Text-to-video color contrast ratio;
• Text size;
• Placement of text on the screen;
• Text synchronization with speech;
• Length of time each line of text is displayed.

Avoid Flickering Content

Visitors who are prone to seizures, dizziness, or nausea may not respond well to any flickering, flashing, or strobing content on your site. Also, be careful using optical illusions as they can equally disorient, disturb, or otherwise distract some visitors.

Clearly Label Interactive Elements

If you have any control over how the video player is designed or the interactive elements in it tagged, make sure every inch of it is clearly labeled. Buttons without labels or with funky naming conventions can throw your visitors off, so stick with the tried-and-true labels everyone else uses.

Enable Keyboard Support

Before publishing any videos to your site, make sure that screen readers and keyboards can fully access them. That doesn’t just mean being able to find the video player on the page. It means controlling features like volume, enabling closed captions, or fast-forwarding.

2. Use an Accessible Video Player

There are a number of video player options that come with accessibility features built in. Here are some of the more popular and OS-agnostic options:

YouTube

YouTube is a popular video-sharing solution, so you might be tempted to use this option. However, the only video accessibility features it comes with out of the box are:

• Subtitles;
• Closed captions.

Even then, it’s up to you to provide and refine the captions for your hearing-impaired visitors. When you upload a new video (or edit an existing one), you’re given the option to upload subtitles or captions:

Your .srt file can be prepared with or without timing (though timing is ideal).

If you don’t have captions prepared, you can always rely on YouTube’s auto-captioning system. They’re not going to be pretty, so you’ll still need to use YouTube Studio to go in and edit the transcript to line up with what’s being spoken:

But it’ll at least save you time writing them all from-scratch.

In the end, your website’s visitors will be able to enable closed captions through the small “CC” icon in the bottom-right of the YouTube video player. This is how they’ll appear when they play within your video:

Users have little to no control over how these captions are displayed aside from having YouTube translate them into another language of their choosing.

I’d say this option is fine to use if you already have YouTube content on your website and you want to quickly fix some of the inaccessibility issues. But keep in mind that there’s a lot more you need to do to 100% make videos accessible.

JW Player

JW Player might not be free or as well-known as YouTube, but this HTML5 video player will do a lot more in the way of accessibility.

For instance, you can use it to enable closed captioning:

Multilingual support is provided, so your users aren’t automatically relegated to the primary language of the video.

JW Player also allows viewers to style captions as they see fit:

They can change the following settings all from within the settings in the video player:

• Font color;
• Font opacity;
• Font size;
• Font family;
• Character edge style;
• Background color;
• Background opacity;
• Window color;
• Window opacity.

Another accessibility feature included is the HLSV4 audio track:

While JW Player recommends using an audio track for something like laying director’s commentary over a movie, you can use this to provide important feedback on what’s happening on the screen (i.e. audio descriptions). For instance, if someone is visually impaired but able to listen to the video, the audio track would explain details on the screen as they occur.

Another useful accessibility feature that comes with JW Player is the interactive transcript:

Transcripts are useful for both visually impaired users who have screen readers as well as hearing impaired users who need audio assistance. And with this interactive transcript, users can search through the transcript for key phrases, making this an incredibly useful feature for all users.

How to Make Video Accessible

When you want to make videos accessible, you have to think about how the content may be perceived from all angles.

• If someone couldn’t hear the audio, what more would they need in order to understand the on-screen content?
• If someone couldn’t watch the video, what could you do to help them visualize what’s on the screen?
• If someone couldn’t control the video with a mouse pad, how would they navigate through the video player’s settings?

In other words, really think about what you have to do to ensure that no one’s experience is compromised by the lack of video accessibility on your site. By using the above guidelines and accessible-friendly media players, you’ll be off to a good start.

Featured image via Unsplash.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.