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:

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>

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>

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>

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.