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.
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:
We plan on adding more focusable elements with future player releases.
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.
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> <script> // Streaming source - MP4 progressive download in this example var src = { mp4: [ 'https://your-mp4-url.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); rmp.init(settings); </script>