- 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.
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.
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
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…
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…
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…
By Simon Sterne
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…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…