Guide to Accessible Website Multimedia

According to HubSpot, multimedia content is more engaging and shareable than its text-only counterparts. Making this content more accessible for your users is a simple process, so long as you take web accessibility guidelines into account while adding this kind of content to your website. With improvements in bandwidth, as well as browsers and media players, you have an opportunity to deliver an engaging, rich media experience to your visitors. Unfortunately, if you don’t prepare properly, the experience will be less accessible, and more frustrating to your visitors.

WCAG time-based media criteria

Guideline 1.2 Time-based Media:

This guideline says to provide alternatives for time-based media; the purpose is to offer equal access to multimedia content. What is time-based media? Time-based media is simply a term that represents different formats of content that purposely changes or flows over time. Examples may include:

  • Movies
  • Audio clips
  • Or animations

Let’s try to keep this simple. If you are using prerecorded or live media, (video or audio), you need to be sure there are transcripts, captions, or audio descriptions available.

  • Offer a transcript or audio description for pre-recorded video content or pre-recorded audio (1.2.1, A)
  • Provide captions for pre-recorded multimedia (1.2.2, A)
  • Offer captions for live multimedia (1.2.4, AA)

“Wait a minute,” you say, “you mentioned animations…”

I’m glad to see that you’re paying attention! Just be sure that your animated content has an acceptable text description.

Pro tip 1: Captions and transcripts are good for searchability and SEO.

Keyboard traps

What is a keyboard trap? A trap is when you are able to use the keyboard to navigate to a component or feature of a page, but then unable to navigate away from that feature.

Media player accessibility

A common example of a keyboard trap is typically a media player. Just be sure your users are able to navigate through or past the player with the keyboard.

Pro tip 2: Be sure to design focus states so the keyboard user can see the active component on the screen.

Video delivery systems

YouTube

Using YouTube for video delivery is a good idea for a variety of reasons. Not only is it a free service, but it also has global reach, and is incredibly reliable. YouTube has done a pretty good job of providing accessible accommodations, too. That said, there are a few problems to consider. Keyboard traps can be a problem with embedded players, so be careful when developing your video delivery system. Be sure to use the HTML5 version of the YouTube player instead of the Flash player; It’s much more accessible.

With a quick Google search for YouTube and accessibility, you will see a variety of resources for screen reader users, captioning services, and accessible player APIs/scripts. With such a large community offering accessible solutions, you should be able to offer accessible YouTube videos on your website. If you are unsure if your videos are accessible, you will want to rely on a screen reader user to fully test your video player.

Vimeo

In January 2014, Vimeo updated its web-based video player with an HTML5 version, which greatly improved video delivery and accessibility. While there may still be room for improvement, the Vimeo player has good keyboard and screen reader support, and also supports captions and subtitles. You can consider Vimeo as a solid video delivery solution, especially as they continue to consider accessibility in future updates.

HTML5

Before HTML5, online videos could only be played using a plug-in like Flash. The <video> element of HTML5 offered a better, standard way to add video to a website. Cross-browser support and an almost unlimited library of scripts have allowed HTML5 to become the de facto method for online video. Mobile devices also offer excellent support for HTML5 <video>.

Watch the webinar “Guide to Accessible Website Multimedia”.





Register for the Accessible Website Multimedia webinar




Your email address will not be published. Required fields are marked *

*

by Kevin Rydberg
January 8th
2015

Subscribe to Blog Updates