Accessible online video for keyboard-only users

When making accessible online video we all tend to think about the needs of blind and deaf users, concentrating on subtitles and transcripts. These features, while essential, can be time-consuming and technically difficult to implement, and are still only part of the accessibility job. An oft-forgotten group, when it comes to accessible online video, is the motor impaired and particularly keyboard-only users.

Ensure controls have key-press functionality

Many online video players don't currently cater for keyboard-only users, as the key-press functionality they require increases the amount of JavaScript needed. This is made more complicated when catering for different browsers. Browsers like Firefox, Chrome and Safari require similar code, but as ever, there's deviation when it comes to Internet Explorer.

Difficulties also arise in the way that some browsers handle Flash, as many won't let you tab into a Flash player. When writing JavaScript for videos to be accessible to keyboard-only users, you'll need to code it once for mouse interaction, once for keyboard interaction, and once more for different browsers.

2 basic features to make accessible videos for keyboard-only users include:

• Provide a focus state for each control, so when tabbing on to each button it gets highlighted (the use of a yellow border to achieve this has started to become the convention)
• Ensure the tabbing order is logical, essentially going from top-left to bottom-right

Use unobtrusive JavaScript

The key when designing accessible videos is to use JavaScript unobtrusively. This means the basic informative and functional elements of the page are coded using HTML, while all the extra 'bells and whistles' functionality is implemented through JavaScript sitting on top of the HTML.

You must think about which elements of your video (and indeed your web page) are decorative and which are functional. Ensure all functional elements can be controlled by the keyboard, and that only decorative elements have functionality that's restricted to the mouse.

Make functionality keyboard-accessible

An example of making functionality accessible by the keyboard is the use of sliders for the video time elapsed. If the sliders are an HTML device then they're not designed to be clicked on with the mouse. Instead, the sliders are decorative to enable mouse users to jump to different points in the video. The time elapsed should instead be a functional element which can be changed using the keyboard (e.g. by typing in the time elapsed and the video jumping to that time), allowing keyboard-only users the same functionality as other users.

The volume control for a video - typically a slider - is also displayed as a decorative item and needs to be keyboard-accessible. For example, a dropdown menu could be exposed when the volume control is focused on with the keyboard, allowing the volume to be set to quiet, medium or loud, without the use of the mouse.

Conclusion

One thing's for sure - as the use of video and other multimedia functionality increases on the web, more time will need to be spent on making sure your website is accessible to all users. Accessible design in any element of your website is key in providing a good user experience for all, and it's crucial that it receives the attention that it deserves.