- 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).
1. Follow Video Accessibility Best PracticesWhen we talk about how to make videos accessible, what we’re ultimately trying to do is solve two big problems:
- To enable everyone to consume the content in full;
- To make it so that everyone can control the playing of the content.
Disable Auto-Play and LoopNobody 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 CaptionsCaptions 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.
Enable SubtitlesFor 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 NeededWhereas 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 TranscriptTranscripts 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.
Properly Format Onscreen TextEven 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 ContentVisitors 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 ElementsIf 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 SupportBefore 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 PlayerThere 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:
YouTubeYouTube 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:
- Closed captions.
JW PlayerJW 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.
How to Make Video AccessibleWhen 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?
So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…
Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…
By Max Walton
Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…