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.

10 thoughts on “Keyboard accessible YouTube controls”

Read comments

  1. Hey Derek,

    Derek here. I’m trying to insert your code on to our website to make our yt embedded vids accessible. Our consumers are people and artists with disabilities. Where would I insert the accessible controls code in the code already backing up the page?

    Thanks,

    Derek

  2. Hi Derek,

    Just a quick question—are you trying to just use the code that I highlighted in the article or are you using the entire script? You’d need to use the entire script, but it will depend on the code that is in your page. You might need to make some adjustments to your HTML code.

  3. Hi Derek,

    I was trying to use the code you highlighted. Not much of a techy or code guru, mostly rely on dreamweaver to do all the code work as I’m a musician and artist trying to help other artists with disabilities through our site, hence the need for access. I’m not sure what code to insert where on the script for the page to make the yt video accessible although I can see where the ty player comes up in the code when looking at code view. Thanks for getting back to me on this.

    Derek

    1. Tough to say exactly what you’d need without looking in too much depth at your code. Tell you what — send us a message (as a reminder) using the Contact form here and I’ll see what we can do to help you out. okay?

    2. Hi Derek,

      Just wanted to see if you got the response we sent over to you? Hope you’re able to get the controls working.

  4. Elliot Grant says:

    Hi, Derek–enjoyed your courses at AccessU (just after this was posted, I see!). I was wondering about just adding tabindex=0 to the and/or tags. That seems to make the default player controls tab-accessible, although once focus is in the player continued tabbing just cycles around the player and doesn’t move on to the rest of the page. Has that been your experience?

    Thanks,

    etg

  5. Elliot Grant says:

    Sigh. That should read “the object and/or embed tags”. That’ll teach me to use angled brackets in a filtered HTML input….

  6. Glen C says:

    I’m using Firefox 4 and can’t use the keyboard to access the controls in the page linked of text “screencast Images in Context”. This shows the issue perfectly. However, trying the link on the text “embedded version of Images in Context” I get to the page where I can tab to the controls, but once there (and even without actioning anything) I end up in a keyboard trap (in the video container). Do others experience this issue?

    1. Jeff Smith says:

      This is an issue that we’ve experienced as well with both Firefox 4 and 5. It seems that focus is allowed into a Flash object, but once in there, it’s trapped and there’s no way to get back out.

  7. @martinszy says:

    This is a good idea, but everytime youtube changes the player you’re going to have to adapt the button’s CSS. Another drawback is what you metion of having two sets of controls.

    I know youtube is experimenting with HTML5 video, I’m guessing that native browser controls are going to be more accessible than flash.

Comments are closed.