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
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
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.
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.
This article was written by Trenton Moss.