Make your Vidyard players more accessible

This article outlines what you can do improve the accessibility of your Vidyard players for viewers with disabilities.

Here you'll find helpful references the Web Content Accessibility Guidelines (WCAG 2.0) that speak directly to using video, including transcripts, descriptive audio, captions, playback behavior, and other important aspects of media accessibility.

The article is also divided into sections based on WCAG 2.0's Level A and Level AA success criteria. For each success criteria you'll find a link to W3C’s Understanding WCAG 2.0 document which provides more detailed descriptions, examples, strategies, and other important resources to guide you toward meeting web accessibility standards.

Special cases

Actions (CTAs)

Any canned/pre-made actions in Vidyard are designed to meet our current accessibility standards out of the box. However, for any custom actions that you create (where you can add your own HTML, CSS, JS), you may need to ensure that you follow any relevant accessibility standards for your business, industry, or jurisdiction.

If you have written code for a custom action, please refer to the WCAG 2.1 criteria to ensure your custom action content is accessible. Here are a few primary points to consider:

• Always give the user the ability to pause the video
• Allow the user to skip fullscreen actions, if not essential
• Turn off the “show once” setting unless the action gates content
• Always include links to action content in video captions
• Ensure all actions can be taken with a keyboard

Level A Success Criteria

Level A contains the basic criteria for making content accessible. This is what most users need to be able to use the site, and will meet most standards required by various organizations. It has limited restrictions on design, so there is no or minimal impact on the website.

1.2.1 Audio-only and video-only (pre-recorded)

Learn more about pre-recorded audio-only and video-only content from W3

Transcripts

Audio-only and video-only content requires a transcript where speaker names are provided. To obtain a transcript you can request a caption for your video, then download the caption without timestamps to use as the basis for a transcript. You can upload a descriptive audio track with your video, but if you do not do this a transcript can be written describing the visuals.

Descriptive audio

Descriptive audio also meets this criteria for video-only content. Vidyard supports videos with multiple audio tracks, so you can upload videos with a described video audio track to aid people who are visually impaired. 

1.2.2 Captions (Pre-recorded)

Learn more about pre-recorded captions from W3

Closed captions

Captions must be added to all videos with sound. If the video has no sound, it is useful to include a caption stating, “[no sound]”.

Vidyard has two options to create captions: you can create your own caption file manually or request captions through our third-party transcription service. Technically, captions are not required if the video is a media alternative for text and is clearly labelled that way. 

There are many resources available detailing best practices for captions.

1.2.3 Audio description or media alternative (pre-recorded)

Learn more about pre-recorded audio description or media alternative from W3

This criteria refers to providing an alternative for synchronized media.  Synchronized media is audio or video that is played in sync with other content and/or interactive time-based elements.  For example, video with synchronized audio, or audio only with interactive, time-based elements would constitute synchronized media; audio-only or video-only would not. See criteria 1.2.1 - Audio-only and Video-only (Pre-recorded) for non-synchronized video and audio.

Alternatives for time-based media

Vidyard does not currently provide a way to generate a time-based media alternative, but it is possible to request captions for your video. If speaker names are included and the video contains no important visual information aside from who is speaking, these captions may be sufficient.  If the video does have other important visual information, you can create a time-based media alternative by adding descriptions of the visuals to the text.  On completion, it should look similar to a screenplay, or a transcription of a video with descriptive audio.

Interactive time-based elements

In the Vidyard player, interactive time-based elements may, for example, refer to time-based events with buttons or forms. If such an element is included in the player, the transcript must also include links to the event contents at the appropriate times. If an alternative for time-based media is not otherwise required, one must be created.

Descriptive audio

Descriptive audio also meets the criteria for synchronized media without interactive time-based elements. Vidyard supports multiple audio tracks in one video, which allows you to upload and host videos with a descriptive audio track. 

1.4.2 Audio control

Learn more about audio control from W3

Volume Control

If audio autoplays and is more than three seconds long, the Hide controls design setting must be turned off in order to give users control of the volume; otherwise, the sound can interfere with the use of a screen reader.

2.2.1 Timing adjustable

Learn more about timing adjustable from W3

Pause/Play Control

Content with a time limit in the player includes events, ads, the playlist, sharing, and autoplay of the next video. In order to meet this criteria, the Disable pausing and Hide controls features must be turned off to allow the user to adjust the time limit.

2.2.2 Pause, stop, hide (autoplay)

Learn more about pause, stop, and hide (autoplay) from W3

Autoplay (video)

If an autoplay video is presented concurrently with other content (including text, audio, or video) and is more than five seconds long, the player setting Disable pausing and the design setting Hide controls must be turned off in order to meet this criteria.

Animated thumbnails

Because the Animated thumbnails plays automatically and cannot be paused, the animated GIF must be under 5 seconds if the player is not the only information on the page.

2.3.1 Three flashes or below

Learn more about three flashes or below from W3

Video Content

Ensuring your video does not have any content that flashes more than 3 times per second makes it safe to watch for users with photosensitive seizure disorders such as epilepsy. There are thresholds where flashing is acceptable, but they are fairly technical, and it is simpler to just avoid flashing if possible. See WCAG criteria 2.3.1 for a more detailed description.

Level AA Success Criteria

Level AA contains criteria that help make accessible content more user-friendly, and makes content accessible for even more users.  Level AA standards are a less common requirement than level A standards for organizations concerned about accessibility. If you are only concerned with meeting A, this level of criteria still has useful guidelines for improving usability for disabled users, but it has some light restrictions on website design.

1.2.5 Audio description (pre-recorded)

Learn more about pre-recorded audio descriptions from W3

Vidyard supports multiple audio streams, which allows you to upload a video with a descriptive audio track.

1.4.3 Contrast (minimum)

Learn more about minimum contrast from W3

The text on the player is small and should retain a contrast ratio of 4.5:1. The play button on the splash screen should have a contrast ratio of at least 3:1. If the colours or size of text, or background colour must be changed, they should still adhere to these guidelines. These guidelines ensure that users with moderately low vision and users with color blindness are able to read text. For a more detailed explanation of AA contrast, see WCAG criteria 1.4.3.

General best practices

Video content

Keep accessibility in mind while planning and recording your video. This is especially important for instructional or informational videos where many accessibility improvements will improve the overall quality of the video. Here are some examples:

• Low background noise for clear sound
• Good lighting and clear visuals
• Explain instructions with visual demonstrations where appropriate
• Explain visual information with audio where appropriate

Usability

Poor usability makes it difficult for anyone to use a website, but it can make things especially difficult for a user with a disability. Many of the accessibility guidelines overlap with W3C’s guidelines for good usability because, although they are important for everybody, they are of specific concern for users with a disability. This means that good usability and user experience tend to make the content more accessible, and vice versa.

Displaying the play button on the player splash screen is a good example of something that is a good usability practice that also has accessibility benefits.  The play button on the splash screen helps to communicate that the image has another function.  This makes it easier to use for everyone and more accessible for users who may otherwise have trouble noticing or understanding that the image can be clicked to play a video.

Autoplay

Outside of a few use-cases, autoplay can be disruptive to any user, but especially to users who rely on a screen reader to navigate the page. Autoplay audio overrides the screen reader audio, interrupting the flow of information that the user is receiving. Without audio feedback it may be difficult for screen reader users to find the player controls to pause the video. Autoplay and other interruptions can also be disruptive to users who have attention deficit disorders. Autoplay accessibility criteria can be met by always giving users control of play/pause and volume. However, it can still be very disruptive and it is best to avoid in most cases.  One case where autoplay is typically okay is when the user understands when they click a link that they are going to a page where a video will be playing.  

Other interruptions

In addition to autoplay, interruptions can include events, ads, up next, and autoplay next video in the playlist. Playlist autoplay should be turned off in the event settings page and up next should be turned off in the player settings page. Remember to always allow users to skip non-essential events and, where possible, consider offering the content in a way that is not time-based, such as embedding it in the page alongside the video.