Media Player Controls Should Be Keyboard Accessible, Screen Reader Compatible

When embedding video or audio on a web page, it is important to check to see if the media player itself is accessible. The media player controls should be keyboard operable and made known to those using screen readers.

Keyboard Accessibility

Media player controls should receive focus using the Tab key and arrow keys. Depending on the control, the media player should be operated using the Enter key, space bar, and arrow keys. Check for the following to determine keyboard accessibility:

The Enter key or space bar activates the Play/Pause control.
The arrow keys, usually up and down arrow keys, manipulate the Volume control.
The arrow keys, usually left and right keys, manipulate the Forward and Rewind controls.
Depending on their design, other controls like Captions and Full Screen are activated by the keyboard.

Screen Reader Accessibility

For screen reader accessibility, the characteristics of each media player control must be stated by the screen reader. These characteristics are:

Name ("Play," "Fast Forward")
State ("selected," "expanded")
Role ("button," "list")
Value ("75%" for volume)