Keyboard Accessible YouTube Controls

By May 17th, 2011

Full keyboard functionality is a must-have for accessibility. Here's how we solve one of the problems with keyboard access for embedded YouTube videos.

Keyboard access is a must have for accessibility. Non-negotiable. If your site breaks basic keyboard functionality, you’re creating problems for several groups of people:

  • Blind people that use a keyboard because they can’t use a mouse

  • People with low-vision that use a keyboard some of the time
  • People with mobility or dexterity impairments that simply prevent them from using a mouse.

Generally, we’re talking about both sighted and non-sighted keyboard users.

It is now, and always has been, a fundamental for accessibility, period. It is one of the first things we check for when testing a site or application for accessibility and usability issues (Yes, I did say usability issues — proper keyboard accessibility makes it easier for everyone to use, disability or not.)

Problems with content

When working with straight up HTML based content, your keyboard accessibility issues are non-existent. With HTML, things like form fields, buttons and links just work, because keyboard accessibility is built in to the browser.

But start mixing content and you get… well, mixed results. Here we look at one example — YouTube videos embedded in a page.

As soon as you have mixed content embedded in a page, we encounter issues with what I refer to as “keyboard scope.”

As an example, open up FireFox and try to tab to the video controls on the page for our screencast Images in Context.

In order to control the movie with the keyboard, you need to click on the Flash movie to give it the focus first. Read that again. You need to use the mouse to click on the movie first in order to use the keyboard.

How we “solve” the problem

When we embed YouTube videos in our pages, we always include an external set of controls that control the key functions: play/pause and mute/unmute. These are added to the page with JavaScript (they only function with JavaScript on, so there is little point in having them on the page when JavaScript is off or unavailable) and utilize the YouTube API to control the movie.

Overlaid YouTube Controls
Screenshot: Keyboard accessible YouTube controls styled to overlay the video player.

We add two simple, natively accessible <button> elements to the page. Here’s the Play/Pause button:

$.fn.youtube_controller = function() {
    var player = $(this);
        
    var playButton = $('<button />', {
        text: 'Pause',
        id: 'playBtn',
        click: function(e){
            e.preventDefault();
            var ytplayer = document.getElementById('video-player');
            if (ytplayer) {
                playerState = ytplayer.getPlayerState();
                if (playerState == 2 || playerState == -1) {
                    ytplayer.playVideo();
                    $(this).text = 'Pause';
                } else if (ytplayer.getPlayerState() == 1) {
                    ytplayer.pauseVideo();
                    $(this).text('Play');
                }
            }
        }
    }); 
    $(player).append(playButton);

Then we style them to make them appear just like the regular Flash YouTube controls. They’re positioned over top of the embedded YouTube movie so that the buttons are in exactly the same place as YouTube’s controls. We style them to look the same, including the :focus states, and then position them over the movie:

#watch-player button {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background: transparent;
position: absolute;
bottom: 6px;
text-indent: -9999em;
margin: 0;
padding: 0;
width: 30px;
height: 26px;
}

.main #watch-player button:focus {
    border: 3px solid yellow;
    outline: none;
}

#playBtn { left: 0; }

#muteBtn { left: 30px; }

Now, go use the keyboard to tab to the “Play/Pause” button on the embedded version of Images in Context

See how it works? The controls are actually living outside the movie and that provides easy keyboard access to everyone.

Not Perfect

Now, this solution isn’t 100% perfect. Sometimes I think we should actually leave the buttons outside the movie and NOT style them to be positioned over top of the YouTube movie so that the buttons are more obviously available to everyone.

Unstyled YouTube Controls
Screenshot: Keyboard accessible YouTube controls below the video player in order to make the buttons more obvious.

I also feel that we need to include some of the other controls that are in the movie — a volume slider, a timeline scrubber, and a fullscreen control.

We could conditionally execute the JavaScript so that it doesn’t create duplicate controls where the tab focus issues have been resolved (IE9 and FireFox 4 both seem to have solved the tab focus problem; unfortunately we know how long it takes to get browsers upgraded in some environments.) Having a duplicate set of controls is certainly the lesser of two evils though — much better than not being able to control the movie with the keyboard at all.

Tagged with: