Accessible YouTube player

YouTube is the most commonly used multimedia player on the web, but it does not conform to the Web Content Accessibility Guidelines (WCAG) 2.0.

Digital Access has created a free alternative YouTube player that incorporates accessible controls.

The Flash player is fitted with accessible controls that are exposed to screen readers and become visible on keyboard focus. If Flash is not detected the video loads as YouTube HTML5 video (if video is available as HTML5).

Click on test link below and the press the Tab key to test the controls with keyboard:

test link - click then press Tab key

test link - press Shift Tab go to back

Bonus features

The accessible controls offer extra functionality:

  • Pressing F moves the video frame by frame
  • The time field is editable, so you can type a time and press Enter to move the video to exactly that time.

Parameters and language object

Player parameters can be added to the video id, for example, "&rel=0&showinfo=0" will prevent the title bar showing and prevent video suggestions to be loaded at the end.

A language object can be added to translate button text to languages other than English - see code example in the "Download" section.

Caption control

Google does not provide full scripting access to their player, so the buttons that are available will vary depending on scripting access. For example, if you have turned captions on using the standard YouTube controls then you cannot turn them off via scripting and therefore there will be no captions on/off button in the accessible controls.

Player controls

The player controls are created as HTML controls that are hidden off-screen. This provides keyboard and screen reader access cross-browser.

When the HTML controls get keyboard focus, visible Flash controls are displayed overlayed over the standard player controls. As keyboard focus moves through the hidden HTML controls, the corresponding Flash controls show a focus indicator (yellow rectangle). The same principle could be used for canvas or SVG controls.

Ideally, only one set of controls should be needed, however, YouTube does not provide access to all functionality for alternative (scripted) controls, for example you cannot control caption colour via alternative controls. Therefore the alternative controls have been provided as an overlay, so mouse users can access the full functionality. Keyboard and screen reader users have access to a subset of the functions provided by the standard player. Some additional features (not part of standard player) have been provided. The idea is to provide the best of both worlds for users.

Aria-live region

When a button is pressed, a message is displayed in a div element that is an ARIA live region. Newer screen readers announce this, for example for the Play button it will say "Play, status is playing" for the forwards button it will say the time for example: "zero thirty-one;", "one zero three", "one thirty-three".

Status info is also permanently displayed as part of the controls so users can check the status without pressing a button. This can also be used by screen readers that do not support ARIA.

The controls are read by screen readers as follows:

  • Video controls heading level six
  • The Forwards and Backwards buttons move time by 10%, the Up and Down buttons adjust volume by 10%. The edit field moves time, for example type '105' and press Enter to move to 1:05
  • Play/Pause button
  • Status is unstarted
  • Backwards button
  • Forwards button
  • Time is zero
  • Time input edit
  • Duration is 3:25
  • Mute/Unmute button
  • Down button
  • Up button
  • Volume is 20
  • Flash start

Caption support

The two scriptable YouTube players that Google provide do not provide full caption control: the chromeless player has no caption support, while the embedded player (used in this example) provides partial caption control.

It works as follows, if captions have been turned:

  • OFF using the standard player controls, then the alternative controls can turn captions on
  • ON using the standard player controls, then the alternative controls cannot turn captions off - only caption size can be controlled

Note Google has changed the way captions are controlled and it might no longer be possible to turn captions off using the alternative controls. Player will be updated accordingly.

Audio descriptions

YouTube does not support audio descriptions as a separate feature. An audio described version of a video can be loaded via a separate button :

<button onclick='visionaustralia.loadVideo("wrapper","Cq-eZWAafXg");'>Play audio described version</button>

Standard controls

The standard YouTube video controls have improved in accessibility over the last two years and they are now announced much better by screen readers. However there are some buttons that are not properly announced and status information (e.g. playing, paused, buffering) is missing.

Keyboard access is not fully supported in browsers other than Internet Explorer. This is a problem inherit in Flash applications.

Alternative controls

Alternative controls can be created in Flash or HTML using the scripted versions of the YouTube player that YouTube provides.

Flash controls have limited keyboard support cross-browser and are not available to all screen readers.

HTML controls are keyboard accessible in all browsers and available to screen readers in general. The down side to HTML controls is that they cannot bring the Flash into full-screen mode due to security restrictions in Flash.

For alternative controls in general, they cannot provide all the functionality available in the standard controls as YouTube do not provide scripted access to these, for example it is not always possible to simply turn captions on or off.

Download player

Go to the downloads page and download "flashcontrolsII.swf and vayoutube.js.zip" and unzip. Include on page using the markup below.

Standard embed

You get the video Id, height and width from the YouTube page with the video - just press "Share" and "Embed" below the video to display the values. The duration value is optional - you read that value on the player itself.

Note: the page has to be served up, it will not run if opened as a local file.

<div id="wrapper"></div> 
<script
type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script
type="text/javascript" src="vayoutube.js"></script>
<script
type="text/javascript">
visionaustralia.youtube({
videoid:"kTvHIDKLFqc",width:"560",height:"315",duration:"2:34",HTMLid:"wrapper", swfpath:"flashcontrolsII.swf"
});
</script>

Embed with player parameters and language code

 var lang = []; //Danish translation
	lang[0]="Start/stop";//"Play/Pause"
	lang[1]="Status er";//"Status is"
	lang[2]="stopped";//"ended"
	lang[3]="spiller";//"playing"
	lang[4]="pause";//"paused"
	lang[5]="loader";//"buffering"
	lang[6]="video parat";//"video cued"
	lang[7]="ikke started";//"unstarted"
	lang[8]="parat";//"ready"
	lang[9]="stille";//"muted"
	lang[10]="ikke stille";//"unmuted"
	lang[11]="tændt";//"on"
	lang[12]="slukket";//"off"
	lang[13]="Undertexter er";//"Captions are"
	lang[14]="mindst";//"smallest"
	lang[15]="mindre";//"smaller"
	lang[16]="små";//"small"
	lang[17]="medium";//"medium"
	lang[18]="store";//"large"
	lang[19]="større";//"larger"
	lang[20]="størst";//"largest"
	lang[21]="Loader undertexter";//"Loading captions"
	lang[22]="Afloader undertexter";//"Unloading captions"
	lang[23]="Tilbage";//"Backwards"
	lang[24]="Frem";//"Forwards"
	lang[25]="Tiden er";//"Time is"
	lang[26]="Tid";//"Time"
	lang[27]="Længden er";//"Duration is"
	lang[28]="Lyd tændt/slukket";//"Mute/Unmute"
	lang[29]="Volume er";//"Volume is"
	lang[30]="Ned volume";//"Down volume"
	lang[31]="Op volume";//"Up volume"
	lang[32]="Undertexter på/af";//"Captions on/off"
	lang[33]="Undertexer mindre";//"Captions smaller"
	lang[34]="Undertexter større";//"Captions larger"
	lang[35]="Video kontrol";//"Video controls" 
//"The time edit field moves time, for example type '105' and press Enter to move to 1:05" lang[36]="Tid feltet bevæger tiden, for exemple skriv '105' og tryk Enter for at gå til 1:05"; visionaustralia.youtube({ videoid:"kTvHIDKLFqc&rel=0&showinfo=0",width:"560",height:"315",duration:"2:34",
HTMLid:"wrapper",swfpath:"bin/flashcontrolsII.swf", language:lang });

Terms of Use

Developed by Pierre Frederiksen. Pierre is a web accessibility specialist at Vison Australia

THIS SOFTWARE IS BEING PROVIDED "AS IS", WITHOUT ANY EXPRESS OR IMPLIED WARRANTY. IN PARTICULAR, VISION AUSTRALIA DOES NOT MAKE ANY REPRESENTATION OR WARRANTY OF ANY KIND CONCERNING THE RELIABILITY, QUALITY, OR MERCHANTABILITY OF THIS SOFTWARE OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. ADDITIONALLY, VISION AUSTRALIA DOES NOT GUARANTEE THAT USE OF THIS SOFTWARE WILL ENSURE THE ACCESSIBILITY OF YOUR WEB CONTENT OR THAT YOUR WEB CONTENT WILL COMPLY WITH ANY SPECIFIC WEB ACCESSIBILITY STANDARD.

Creative commons licence - logo
This work is licensed under a Creative Commons License












Print Print larger font