Radiant Media Player is following Web Content Accessibility Guidelines (WCAG) 2 standards and WAI-ARIA guidelines. Keyboard navigation is enabled by default and we test our player on most commonly used screen readers by accessibility viewers.
Radiant Media Player can be customized with CSS in order to provide support for Level AA or AAA contrast ratios.
The player container is equipped with an aria-label attribute (set with player setting
contentMetadata.title) and an aria-describedby attribute (set with player setting
contentMetadata.description through a label element). The player container has an "application" role. The player can be focused with an interaction (click/touch) or by cycling through page elements using the tab key.
Many player elements can be interacted with using keyboard navigation and are also aria-* enabled, including play/pause or fullscreen buttons, player modules and playlist/related.
Below is a list of keyboard keys that can be used to control the player:
Tab : advance to the next focus-able item
Shift + Tab : go back to the previous focus-able item
Space : play or pause content
f : enter fullscreen when not in fullscreen / exit fullscreen when in fullscreen
m : mute/unmute content
c : cycle through available caption tracks (when available)
Escape : exit fullscreen or when not in fullscreen exit module menu
Enter : interact with the currently focused item
ArrowLeft : seek 5 seconds backward in content
ArrowRight : seek 5 seconds forward in content
ArrowUp : up volume by 10%
ArrowDown : reduce volume by 10%
0 : seek to 0% of on-demand content
1 : seek to 10% of on-demand content
2 : seek to 20% of on-demand content
3 : seek to 30% of on-demand content
4 : seek to 40% of on-demand content
5 : seek to 50% of on-demand content
6 : seek to 60% of on-demand content
7 : seek to 70% of on-demand content
8 : seek to 80% of on-demand content
9 : seek to 90% of on-demand content
Disabling keyboard controls: you may want to implement your own keyboard controls based on our player API. In order to do so you will first need to disable the default player keyboard
controls. This is done by setting disableKeyboardControl (Boolean) to true (default: false). As a rule of thumb we recommend to always have a keyboard controls strategy. Only disable it if you are using your own custom implementation.
Aria labels are spoken by a screen reader when a specific element has focus. Aria labels, like player labels are automatically translated in 26 languages (default to English).
Aria labels can be
customized by using the labels setting.
We test Radiant Media Player against the most-used screen readers for accessibility. If a recommendation is needed for using our player with better accessibility features, this recommendation should be the following: