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:
- Always show the media control bar (Normally it will auto-hide)
- Ensure focused elements are always outlined visibly
- Update the playlist to only show live and future events (if you haven't added captions to all recordings)
- Add closed captions to all of your recordings
It is recommended that you have some web development experience to make these changes. Here is how to make those changes:
1. 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>
2. 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>
3. 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>
4. 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.
- How to use Automated Captioning of Recorded Broadcasts
- How to use BoxCast's Automated Live Captioning
- How to add Closed Captions Manually to your Broadcast