Lianna Doley
 · Community @ Ceros

Creating Accessible Videos

What is the Ceros Accessible Video Player?

As a part of our Accessibility features, Studio provides an accessible video player. This video player allows users to navigate the video via both keyboards and screen readers, on all desktop variants and browsers, as well as mobile devices. This means that users can do things like control playback and adjust volume using keyboard navigation and/or screen readers. The video player also allows for closed captioning files to be added to videos.

This video player is the default player in all Studio experiences, no action needs to be taken to enable this player in the studio. Any videos uploaded to Studio experiences will be played on this accessible player— embedded videos however, will use their original player (think YouTube, Vimeo, etc.). 

Alternative Audio Tracks

For accessibility purposes, you may be interested in uploading alternative audio tracks that provide more detail for users with visual impairments. To incorporate alternative audio tracks into Studio, you’ll need to create two versions of your video file, outside of Studio. One version should have the standard audio track, and the second version should have the accessible audio. To give the user the ability to view either video file in Studio, you can create a toggle interaction in the studio. Here’s how:

  1. Import both video files into Studio by dragging and dropping them from your desktop

  2. Place the standard audio video wherever you want it to live on the canvas in the experience, and layer the video file with the alternative audio track directly over the standard video

  3. In your layers panel, turn off the visibility of the accessible video by clicking on the eyeball icon next to the video layer

  4. Now, you can style your button however you’d like, but as you can see in the screenshot below, we’ve create a text box above the video prompting the user to click for accessible audio

  5. Over the text box or button you’ve created, draw out a hotspot

  6. On your hotspot, apply an on click- toggle- accessible video interaction, making sure you choose the accessible video from your layers panel to target here

  7. It’s also important to remember to add your aria label to the hotspot, so the user knows that they can click there to view the video with alternative audio

Now, when your user navigates the experience, they can choose whether or not they’d like to toggle on the accessible audio track video rather than the default video.

Closed Captioning

Adding closed captioning files to your videos in Studio is a fairly straightforward process. Simply select the video and navigate to the gear icon in the Design panel to open up your video settings.

Here, you can choose to Upload a closed captioning file. Please note that in order for your closed captioning file to properly upload, it must be saved as a VTT file. Studio will not accept file types other than VTT for closed captioning.