All Collections
Embedding + Player Settings
Player Settings
Improve Web Accessibility of BoxCast Video Player
Improve Web Accessibility of BoxCast Video Player

This article is for developers. It offers ways to improve the web accessibility of the video player.

Mindy Worley avatar
Written by Mindy Worley
Updated over a week ago

We understand that some of our customers are required to make sure their websites are 100% compliant with Office of Civil Rights requirements for accessibility on your websites. As we continue to improve the native accessibility of our BoxCast Player, there are a few changes you can make to ensure that your player is compliant:

It is recommended that you have some web development experience to make these changes. Here is how to make those changes:

Always show the media control bar

Normally, your embed code will look something like this:

<div id="boxcast-widget-channelid1000"></div><script type="text/javascript" charset="utf-8">(function(d, s, c, o) {var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];var h = (('https:' == document.location.protocol) ? 'https:' : 'http:');js.src = h + '//js.boxcast.com/v3.min.js';js.onload = function() { boxcast.noConflict()('#boxcast-widget-'+c).loadChannel(c, o); };js.charset = 'utf-8';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'channelid1000', {"showTitle":1,"showDescription":1,"showHighlights":1,"showRelated":true,"defaultVideo":"next","market":"boxcast","showCountdown":true}));</script>

You should add the snippet "alwaysShowMediaControl": 1 in the following location:

<div id="boxcast-widget-channelid1000"></div><script type="text/javascript" charset="utf-8">(function(d, s, c, o) {var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];var h = (('https:' == document.location.protocol) ? 'https:' : 'http:');js.src = h + '//js.boxcast.com/v3.min.js';js.onload = function() { boxcast.noConflict()('#boxcast-widget-'+c).loadChannel(c, o); };js.charset = 'utf-8';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'channelid1000', {"showTitle":1,"showDescription":1,"showHighlights":1,"showRelated":true,"defaultVideo":"next","market":"boxcast","showCountdown":true,"alwaysShowMediaControl": 1}));</script>

Ensure focused elements are always outlined visibly

To add this you will just need to add the following snippet above your embed code:

<style type="text/css">
โ€‹[data-player]:focus, .boxcast-unstyled-button:focus, .boxcast-clappr-button:focus, .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button:focus {outline: 5px solid aqua !important;} </style>

Update the playlist to only show live and future events (if you haven't added captions to all recordings)

Add the following snippet to the same location as the "alwaysShowMediaControl":1,

relatedBroadcastsQuery: {q: "timeframe:preroll timeframe:current timeframe:future", s: "starts_at"}, messages: {related_title: 'Upcoming Broadcasts' }

Your embed code should now look something like this:

<div id="boxcast-widget-channelid1000"></div><script type="text/javascript" charset="utf-8">(function(d, s, c, o) {var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];var h = (('https:' == document.location.protocol) ? 'https:' : 'http:');js.src = h + '//js.boxcast.com/v3.min.js';js.onload = function() { boxcast.noConflict()('#boxcast-widget-'+c).loadChannel(c, o); };js.charset = 'utf-8';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'channelid1000', {"showTitle":1,"showDescription":1,"showHighlights":1,"showRelated":true,"defaultVideo":"next","market":"boxcast","showCountdown":true,"alwaysShowMediaControl":1,relatedBroadcastsQuery: {q: "timeframe:preroll timeframe:current timeframe:future", s: "starts_at"}, messages: {related_title: 'Upcoming Broadcasts' }}));</script>

Add closed captions to all of your recordings.

BoxCast offers you 3 ways to add captions to your broadcasts. Go to these links below to find out which way would work best for you.

Did this answer your question?