Accessible HTML5 Video Player

Need an accessible HTML5 video player? A player built with compliance in mind to broaden those who can watch video content?

IBM Watson Media has been making improvements to the existing video player around accessibility. This included re-evaluating keyboard controls, visual accessibility like font and indicators, along with many other aspects toward accessibility. As a result, the player now meets the IBM accessibility guidelines, as of version 7.0, along with the W3C WCAG 2.0 standards and Section 508 of the Rehabilitation Act: Application and Scoping Requirements. This article covers the various advancements and features found in the player toward making it accessible. Note that while it touches on captions, it won’t go into great depth. For more information on that topic, watch this webinar on How to Add Closed Captions Powered by IBM Watson.

Keyboard accessible

The IBM Video Streaming player can be fully operated using the keyboard. Besides basic features like pausing playback by pressing the spacebar, viewers can access the menu and also use the search inside the player. The latter allows the user to type in keywords and be given a list of relevant moments, as transcribed by the IBM Watson Speech to Text AI. In addition, hotkeys have also been added for elements like the volume and seekbar. Controls for the player, including hotkeys, function as follows:

The space bar pauses or unpauses the video stream.
Tab allows you to cycle through player controls, starting from the “play” button and going left to right across the top menu. Click the enter key to select and engage any highlighted function. For example, to change the video quality setting you can tab over to the “HD” icon. Once illuminated, press enter to bring up the options. You can press up or down on the keypad to scroll through the menu options and then click enter to choose an option and close the menu. Alternatively, if you decide not to change them you can press escape to close the overlay.
Unless something is selected, the arrow or cursor keys control both the volume and the seekbar. Pressing up or down will either raise or lower the volume. Pressing left or right will either rewind or advance the moment in the video, done in ten second intervals.

The registration gate, often used for lead generation, has also been made completely keyboard accessible. This includes being able to navigate through the following possible fields:

Name
Email
Phone
Company
Job title,
Zip code/postal code
State
City
Address
Industry
Company size
Country

Screen reader support

Virtually all elements and changes in the video player are now readable by screen readers. This required going through and making sure that elements like the closed captions, search results and buttons were supported. This also encompasses added player features, such as the screen for password protected content and also the registration gate, which now have support for screen readers.

As it relates to keyboard accessibility, if someone tabs over the play button the screen reader will also given available information about the content even if it’s not on screen, such as noting the title or broadcast title of the content.

Visual accessibility

The visual accessibility of the player has also been enhanced. This includes considerations toward font size, the contrast of the font and indicators. The timing of animations along with the behavior of elements that open or auto close have also been updated to better meet accessibility requirements. These visual elements now meet WCAG AA level requirements.

Closed captions

The IBM Video Streaming solution supports a wide range of caption workflows, and has for awhile. This includes captions generated by the content owner, and can be uploaded from a VTT file. For live content, support for CEA-608 captions is available. A sample workflow for this is available for the Karrera Video Production Center, Blackmagic OpenGear Converter, HD492 iCap Encoder and Osprey Talon G1 Encoder.

These mentioned efforts usually involve either a lot of manual work or can be expensive if contracting out so another firm is managing it. The alternative offers with IBM Watson Media’s solutions is to allow AI to manage it. This is done by leaning on IBM Watson’s speech-to-text capabilities. Watson Speech to Text transcribes spoken word to text, creating captions for that assets. Those captions then appear inside the player, and can be toggled on or off. Captions can also be manually edited for accuracy or to adhere to preferences as well.

Disabled auto play

This is also not a new function, but falls under the idea of making a player accessible. Essentially the video player requires some form of response from the user before it will play, making it more user friendly.

HTML5 and browser accessibility

The IBM Video Streaming browser is based around HTML5, and has been for awhile. While the service at one point offered both an HTML5 version and a Flash version, the latter is being transitioned out. The goal is to have a player that is accessible without requiring that outside applications or plugins be downloaded first.

As a result of this, certain browsers that do not support the HTML5 standard will no longer be supported with the IBM Video Streaming service. This includes Internet Explorer 10 (IE10) and Internet Explorer 11 (IE11) and earlier versions of the browser. These legacy browsers do not support HTML5 video. Older browsers impacted from this change can still play video content from an IBM Video Streaming player; however, they will see the following notification:

‘Notice – Your browser is out of date.
Please update your browser to continue watching videos on this page.’

In the near future, though, these impacted browsers will not be able to play the content.

Summary

The IBM Video Streaming player has seen a number of improvements to enhance the accessibility of the content for end users. While some elements have been in the player for a while, others like complete keyboard controls and screen reader support are brand new. As more regulations and advancements in technology occur, IBM will strive to meet them from our video offerings.

For those from the government sector and looking for more information on the closed caption element in particular, download this white paper on AI Closed Captioning Services for Local and State Governments.