How Do You Make Video Accessible?

Wdd Logo.
March 18, 2020
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: YouTube - Upload Subtitles 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: YouTube - Auto Subtitles 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: YouTube - Subtitles 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: JW Player - Closed Captions 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: JW Player - Captions Styling 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: JW Player - Audio Tracks 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: JW Player - Interactive Transcripts 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.

Read Next

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…