If your website contains multimedia, there’s a good chance that you’re using a third-party video player to serve that content.
Building a native video player requires resources — particularly if you’re designing a media player that fulfills the requirements of the Web Content Accessibility Guidelines (WCAG). Third-party extensions and widgets can serve your content just as effectively as a native solution, and you can install them with a few quick clicks.
However, you’ll need to consider accessibility features when choosing a third-party video player. Here are a few tips to keep in mind when evaluating your options.
1. Make sure your video player supports closed captions
WCAG is the consensus international standard for digital accessibility, and if you’re adding multimedia to a website, it’s a good idea to follow WCAG recommendations to ensure compliance with the Americans with Disabilities Act (ADA) and other non-discrimination laws.
WCAG 2.1 requires captions for all pre-recorded audio content in synchronized media. In other words, every video that contains important audio content must include captions.
You can provide captions by pre-rendering text on your videos (commonly referred to as “burned in" or “open" captions), but this isn’t the best practice: Some users may want to turn off captions, change the caption font size, or listen to the text with a screen reader. Closed captions provide a better experience for users, so it’s in your best interest to use a video player that supports caption files.
When writing captions, keep these tips in mind:
- Describe all important audio content, including speech, music, and sound cues.
- Make sure the captions are properly synchronized with the videos.
- Captions should appear on screen for at least three seconds to give viewers time to read them without pausing the playback.
- If you use automated captions, check them for accuracy before publishing your content.
Related: Avoid These 4 Mistakes When Writing Video Captions for Accessibility
2. Make sure users have control of the content
If your videos play automatically, WCAG 2.1 Success Criterion 2.2.2, “Pause, Stop, Hide,” requires that you provide a mechanism that allows the user to — you guessed it — pause, stop, or hide the content.
In practice, the best solution is to avoid automatic playback. Put simply, people hate autoplay. When videos play automatically, some users will become frustrated, particularly if they’re browsing your website in a public environment.
Ideally, your videos won’t play immediately when your page loads, and your video player will provide users with options for controlling their experience. A good third-party video player should include:
- Pause, stop, and play buttons
- A toggle to enable or disable captions
- Options for switching views to full-screen or windowed modes
- Options for changing caption size or font
At minimum, your video player needs pause, stop, and play buttons to meet WCAG requirements. These controls may disappear during playback, but the user should be able to easily engage them when needed. If media player controls are hidden by default, make sure users understand how to activate them.
Related: WCAG 2.2 Introduces New Requirements for Hidden Controls
3. Test your video player for keyboard accessibility issues
Third-party video players are a common cause of keyboard traps, which occur when keyboard-only users navigate to the controls of the video.
A keyboard trap is exactly what it sounds like: People navigate to a certain interactive element and become stuck. They’re unable to navigate through the rest of your page, which can be extremely frustrating.
Many people use a keyboard alone (without a mouse) to navigate the internet, so you’ll need to test your video player to make sure that it works as expected.
To perform a quick test, use the Tab and Shift-Tab commands to access your video player. Use the spacebar to toggle playback.
- Can you operate all of the controls of the video player?
- Can you navigate away from the video player after pausing playback?
- If the controls disappear when the video plays, can you bring them back on screen through keyboard commands alone?
Keyboard accessibility issues can occur for a variety of reasons, and you may not need to switch to another third-party video player if you find an accessibility barrier. However, you should try to resolve the issue as quickly as possible.
Related: Avoid "Keyboard Traps" To Make Your Site More Accessible
4. Consider embedding videos from a well-known platform
YouTube, Vimeo, and other video platforms have simple tools for creating embed codes. Generally speaking, most internet users understand how these services' video players work — and by embedding video, you’ll greatly reduce bandwidth issues.
Users will enjoy faster loading speeds, and since most embedded players are responsive by default, you won’t have to spend much time working with your website’s CSS (cascading style sheets).
Remember, embedding videos doesn’t automatically solve every accessibility issue. You’ll still need to make sure that your media has accurate captions, and where possible, you should provide a transcript on your own website to provide users with a text alternative.
For more tips, review our Checklist for Creating Accessible Videos or send us a message to connect with a subject matter expert.
