Radiant Media Player

Accessibility features

Documentation sections

Making the player accessible

Radiant Media Player supports accessibility features according to the WAI-ARIA recommendations. We test our player with the free NVDA screen reader.

We need your help! Making our player as accessible as possible is important to us. Please share feedback on your findings or requirements.

Accessibility features description

The player container is equipped with an aria-label attribute (set with player setting contentTitle) and an aria-describedby attribute (set with player setting contentDescription through a label element). The player container has an "application" role. The player can be focused with a click/touch or by cycling page elements with the tab key.

Once the player is focused you can cycle through a selection of UI elements using the tab key. Those elements currently are:

  • Play/pause: "button" role with updatable aria-label (space/enter key to play/pause when focused)
  • Seek bar: "progressbar" role with aria-label (left/right key to seek into content when focused)
  • Volume: "button" role with aria-label (space/enter key to mute/unmute when focused - up/down key to adjust volume level)
  • Fullscreen: "button" role with updatable aria-label (space/enter key to enter/exit fullscreen when focused)

We plan on adding more focusable elements with future player releases.

Keyboard controls

Below is a list of keyboard keys that can be used to control the player when the player has focused (either when clicked or selected with the tab key).

space : Play or pause the media

f : enter fullscreen

escape : exit fullscreen

left arrow : seek 10 seconds backward in the media

right arrow : seek 10 seconds forward in the media

m : mute/unmute media content

up arrow : Up volume by 10%

down arrow : Reduce volume by 10%

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 so only disable it if you are using your own custom implementation.

Aria labels customisation

With Radiant Media Player 5.3.0 release, it is now possible to customise player aria labels. This can be used for internationalisation purposes or to best adapt player aria labels to your needs.

Customised aria labels are passed to the player through the ariaLabels Object setting. Following are the default values for ariaLabels setting:

ariaLabels: {
  play: 'Play',
  pause: 'Pause',
  seek: 'Seek',
  volume: 'Volume',
  volumeMinus: 'Minus',
  volumePlus: 'Plus',
  volumeOff: 'Mute',
  volumeMid: 'Half volume',
  volumeFull: 'Full volume',
  quality: 'Quality',
  sharing: 'Sharing',
  audio: 'Audio',
  captions: 'Captions',
  speed: 'Speed',
  related: 'Related',
  chapters: 'Chapters',
  enterFullscreen: 'Enter fullscreen',
  exitFullscreen: 'Exit fullscreen',
  skipAd: 'Skip ad',
  sharingLink: 'Link to media',
  sharingEmbedCode: 'Embed code for media',
  contentTitle: 'Media content',
  close: 'Close',
  airplay: 'AirPlay',
  cast: 'Google Cast',
  pip: 'Picture in picture'

if contentTitle setting is set the ariaLabels.contentTitle will be filled with the string from contentTitle unless it is explicitly set through the ariaLabels setting.

if you do not set all properties for ariaLabels as an input setting, the missing values will be replaced by default values.

Player code example for passing custom ariaLabels:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.3.0/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
  // Streaming source - MP4 progressive download in this example
  var src = {
    mp4: [
  // Customised aria labels
  var ariaLabels = {
    play: 'Lecture',
    pause: 'Mettre en pause',
    seek: 'Avancer our reculer dans le contenu',
    volume: 'Ajuster le volume sonore'
  // Player settings
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    poster: 'https://your-poster-url.jpg',
    // Here we pass custom aria labels
    ariaLabels: ariaLabels
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.