YouTube is the most commonly used multimedia player on the web, but the Flash version does not conform to the Web Content Accessibility Guidelines (WCAG) 2.0.
Update: This accessible player has become obsolete because YouTube now uses the HTML5 player in major browsers. The YouTube HTML5 player has a good level of accessibility and can be used as is.
The demo below only works if the browser loads the YouTube Flash player.
Digital Access created a free alternative Flash 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
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.
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.
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.
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
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.
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>
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 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.
Go to the downloads page and download "flashcontrolsII.swf and vayoutube.js.zip" and unzip. Include on page using the markup below.
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.
Embed with player parameters and language code
var lang = ; //Danish translation
lang="Status er";//"Status is"
lang="video parat";//"video cued"
lang="Undertexter er";//"Captions are"
lang="Loader undertexter";//"Loading captions"
lang="Afloader undertexter";//"Unloading captions"
lang="Tiden er";//"Time is"
lang="Længden er";//"Duration is"
lang="Volume er";//"Volume is"
lang="Ned volume";//"Down volume"
lang="Op volume";//"Up volume"
lang="Undertexter på/af";//"Captions on/off"
lang="Undertexer mindre";//"Captions smaller"
lang="Undertexter større";//"Captions larger"
lang="Video kontrol";//"Video controls"
//"The time edit field moves time, for example type '105' and press Enter to move to 1:05"
lang="Tid feltet bevæger tiden, for exemple skriv '105' og tryk Enter for at gå til 1:05";
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.
This work is licensed under a
Creative Commons License