Radiant Media Player

Accessibility features



Documentation sections


Making the player accessible

Radiant Media Player is following Web Content Accessibility Guidelines (WCAG) 2 standards and WAI-ARIA guidelines. Keyboard navigation provides accessibility support 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.


Accessibility features description

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 elements of the player can be interacted with using keyboard navigation, including play/pause or fullscreen buttons and all player modules. Our playlist and related content layouts also support accessibility.


Keyboard controls

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

Aria labels are spoken by a screen reader when a specific element has focus. Aria labels, like player labels are automatically translated in 17 languages (default to English).

Aria labels can be customized by using the labels setting.


Screen reader support

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:

  • NVDA 2017+ with latest Chrome on Windows 10+
  • VoiceOver with latest Safari on macOS 10.12+
  • TalkBack with latest Chrome for Android
  • VoiceOver with latest Safari on iOS 12+
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.