YouTube HTML5 Player Accessibility

YouTube supports 2 types of video player: the default player uses Flash; and the HTML5 player—you guessed it—takes full advantage of HTML5’s multimedia capabilities.

While the default player is accessible, the HTML5 player is a far friendlier experience for anyone using a screen reader.

Enabling the HTML5 Player

To enable the HTML5 player, visit the YouTube HTML5 Video Player page, skip down to the Supported Browsers heading, and arrow up once or twice until you land on a button…

Well, JAWS and Internet Explorer announce it as a button, while NVDA and Firefox say link. But let’s not get bogged down in details. ๐Ÿ˜‰

If the button says: Use the Default Player, it means you’re already using the HTML5 player. Good. We’re done here. But if it reads: Request the HTML5 Player, not so good. Press the button to remedy.

If you are an IE user, this will only apply to the current window or any tabs or windows spawned by the current window. Worse, the setting is lost if you close the browser. Annoying. ๐Ÿ˜ฆ

The only workaround is to open the Tools menu and tick the checkbox for the ActiveX Filtering option. This will apply to all IE windows and tabs. It ensures YouTube will always use the HTML5 player… and it also has the unfortunate side-effect of preventing all Flash content from running, things such as audio captchas, for instance. Super annoying! ๐Ÿ˜ก

Anyways, once you have all that sorted, you can move on to the important matter of playing videos.

Keyboard Shortcuts

Due to the lack of official documentation, I had to rely on other sources and my own experimentation to cobble together the list of shortcuts below:

J/L   skip backwards/forwards 10secs

ArrowLeft/ArrowRight   skips backwards/forwards 5secs

ArrowUp/ArrowDown   increases/decreases volume by 5%

M   mutes/unmutes audio

Shift+</Shift+>   decreases/increases speed

K or Space   pauses/resumes video

Home/End   jumps to start/end of video

0–9   jumps to 0%–90% mark

NB: Use 0–9 on the main keyboard (and not the numeric keypad!) to jump to a per centage of the video’s elapsed time. For example, press <5> for the midpoint of the video and <0> to go back to the start.

Using Shortcuts with Screen Readers

I tested the shortcuts on JAWS 17 with IE 11 and on NVDA 2015.4 with Firefox 42.0 on a Windows 7 machine. (As always, ymmv!) I found 3 methods for using the shortcuts with both screen readers:

  1. Press <Ins+3> in JAWS or <Ins+F2> in NVDA, and the next keystroke will be passed directly to the player. Convenient for one-off commands, but not practical for multiple keystrokes.

  2. Turn off the Virtual Cursor in JAWS (<Ins+Z>) or enter Focus Mode in NVDA (<Ins+Space>), and all keystrokes will be passed to the player. Works fine… until you switch to another tab or change windows.

  3. The best solution, imho, is to go to the top of the page displaying your chosen YouTube video, and press <C>. This should take you to the player’s Settings menu. Press <Enter> to activate Forms Mode and press <Esc> to close the menu.

At this point, all the shortcuts except Space (pressing <Space> will open the Settings menu—probably not what you want!) should work. And in silence. What’s more, if you move to another window and come back later, you’ll still be in Forms Mode and able to pass through more shortcuts.

Personally, I like to tab up once from the Settings menu to the Volume slider. Now, when I press <ArrowUp> or <ArrowDown>, the screen reader announces the new volume level.

When focused on the Volume slider, pressing <Space> will pause/resume the player. Note, however, that <ArrowLeft> and <ArrowRight> will decrease/increase volume, <Home> mutes audio, and <End> shoots volume up to 100%! ๐Ÿ˜ฎ

And that’s all I’ve got for now! If I’ve left anything out, please feel free to mention it in the comments. In the meantime, best wishes to all my readers for a Merry Christmas and a Happy New Year! ๐Ÿ™‚

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s