Demo: Documentary Preview

#a11y by Chris Higgins

Story

Online video is more important than ever, and we want it to be accessible to everyone.

At AccessibilityOz, we conduct web accessibility consultations and provide advice to our clients. One of the big trouble spots that kept coming up was videos: they’re used frequently but the players are invariably inaccessible.

Our clients would ask us what to do, and we couldn’t give them a good answer.

Thus, OzPlayer!

We decided to create OzPlayer because we want online video to be accessible to everyone. Developing the specs was easy, as we were working off our own testing methodology which is built solidly on WCAG 2.0 guidelines. Next, we brought on a developer with expertise in building accessible JavaScript tools.

After several iterations, we rolled out OzPlayer in early 2015. But the work doesn’t end there as streaming video means keeping up with browser updates. For systems like Firefox and Chrome, these updates are rolled out as often as every six weeks. We track each one to make sure OzPlayer remains up-to-date, while also testing other “accessible” players along the way.

Get Started

Source streamed video, then play through OzPlayer “Skin”

OzPlayer is completely accessible. To get started, you will need your video uploaded on YouTube, Vimeo, your own site or CDN. Don’t have one in place? Test it out on a dev site with this hilarious Caption Fail video. You can then use our handy code generator to get the HTML code you’ll need to insert onto your page. Sizing is responsive, and accessibility features are completely built in!

To recap:

• Video plays from YouTube, Vimeo Pro or your own web server or content delivery network
• Responsive: resizes to fit the content area
• Synchronized audio descriptions on a separate audio track
• Interactive transcript with text fallback (see demo)
• Fully keyboard accessible with no keyboard traps

What a relief to have an accessible video solution for today’s mobile society. OzPlayer also has flash fallback for our visitors on older browsers, such as Internet Explorer 8.

Tech Specs

OzPlayer works in your CMS with HTML5 and older browsers

Alternately, you can use our code generator to answer some simple questions and generate the HTML code you need. This can be inserted into the “HTML” or “text” edit mode of most CMSes.

You will use standard HTML5 markup: the VIDEO, AUDIO, and TRACK elements. Simply place the elements on the page and then pull in the OzPlayer JavaScript and CSS files. On a modern browser, OzPlayer will then overlay its controls and captions over the top of the native video.

For browsers that lack HTML5 VIDEO support, OzPlayer acts as a polyfill and drops a Flash player in the correct location. The Flash fallback uses exactly the same controls as the native player, providing a consistent and accessible experience even on older systems.

<div id="demo" class="ozplayer" data-transcript="demo-transcript" data-controls="stack">
  <video width="640" height="360" poster="../poster.jpg" preload="none" controls="controls">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />
    <track src="captions.vtt" kind="captions" data-sync="0" srclang="en" default="default" />
    <track src="descriptions.vtt" kind="metadata" data-kind="transcript" data-sync="0" srclang="en" />
  </video>
  <audio preload="none" data-default="default">
    <source src="descriptions.mp3" type="audio/mp3" />
  </audio>
</div>
<details class="ozplayer-expander" open="open">
  <summary>Video Transcript</summary>
  <div id="demo-transcript" class="ozplayer-transcript"></div>
</details>

OzPlayer is a commercial product, but we want everyone to have accessible video experiences. It is free for personal use and for not-for-profits with annual budgets under $1,000,000 (USD). Other organizations may use it free for up to ten videos. Contact us to discuss commercial licensing information. Custom licenses are also available for purchase.

Resources

Gain understanding of today’s landscape for accessible video content and video players

Interested in the reasons behind various video player accessibility guidelines? Refer to the AccessibilityOz Video Factsheet for guidance on video accessibility principals and the impact on users.

Gian Wild’s article about video accessibility helped me understand the difference between employing an accessible video player (like OzPlayer) versus identifying/creating accessible content.