- 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 Practices
When 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 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.
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.
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.
![YouTube - Upload Subtitles](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/02/YouTube-Upload-Subtitles-1024x561.png)
![YouTube - Auto Subtitles](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/02/YouTube-Auto-Subtitles-1024x567.png)
![YouTube - Subtitles](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/02/YouTube-Subtitles-1024x567.png)
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](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/02/JW-Player-Closed-Captions-1024x567.png)
![JW Player - Captions Styling](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/02/JW-Player-Captions-Styling-1024x567.png)
- Font color;
- Font opacity;
- Font size;
- Font family;
- Character edge style;
- Background color;
- Background opacity;
- Window color;
- Window opacity.
![JW Player - Audio Tracks](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/02/JW-Player-Audio-Tracks-1024x567.png)
![JW Player - Interactive Transcripts](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/02/JW-Player-Interactive-Transcripts-1024x567.png)
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?
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
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
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,…