A11y: Audio and Video Control

All audio and video embedded on your website needs to be accessible with both a mouse and keyboard. If you use YouTube and Soundcloud to embed these media types, then it should be WCAG AA compliant.

In addition to that, the following criteria must also be met:

  • Avoid auto-playing any audio or video whenever possible.
  • Any video that does auto-play for more than 3 seconds has to have a way to pause or stop.
  • There needs to be a way to change the audio level independent of the system’s volume control.

Instead of forcing your audio-related content on your users, it’s best to allow them to interact with it when they’re ready.

A11y: Video and Text Alternatives

Videos are slightly more complicated than audio files in that you also have to take into consideration any sort of imagery that may affect the video’s message. When posting a video, you need to include a full transcript either below the video, on a separate page with a link, or as captions. If the video has images with text that are crucial to the message, that text must also be part of the transcript.

Key Takeaways

  • All public videos must be uploaded to YouTube before being used on your website.
  • Captions and transcripts serve to provide equivalent information.
  • Either captions or a transcript must accompany all videos.

YouTube Requirement

As a district, we require that you upload all of your videos to YouTube before embedded them on your site because YouTube will auto-generate captions while also meeting ADA requirements for video control. The auto-generated captions will not be 100% accurate and will require you to make some adjustments; however, it’s a start and will save you time.

After your video is uploaded to YouTube, you can use a Video block to add it to a page or post on your website.

Equivalent and Accurate Information

The purpose of captions and transcripts are to provide everyone with the same information. Even though YouTube’s auto-generated captions continually improve, they will often result in humorous or embarrassing caption failures, and they certainly don’t take into account proper grammar and punctuation. Automatic captions by themselves are not ADA compliant at the AA level, but they’re a decent start.

If your transcripts and captions are not accurate, then it follows that not everyone is receiving equivalent information. Here are some guidelines to help with that:

  • Don’t include more than three lines of text on the screen at once.
  • Text has to be shown between 3 and 7 seconds.
  • Captions cannot cover any important graphics or visuals (like faces and charts).
  • The caption font has to be clear and distinguishable.
  • Captions need to preserve dialect and slang as much as is reasonably possible, and also reflect the exact words of the speaker. (It’s okay to do some light cleanup of filler words like ‘uh, um, etc.,’ so that it reads more easily.)
  • Any sort of background sounds like music, laughter, and noises have to be included in brackets, for example [laughter] or [ominous music].
  • If a conversation is happening in a video, and the person off screen is talking, that person’s name needs to appear in capital letters followed by a colon. (BARRY: I’m the fastest man alive.)
  • For transcripts, there should always be some sort of indicator as to who is talking, usually a single line above the paragraph or their name followed by a colon and then the text.

Additional Caption Guidelines

If using a transcript, and not captions, that transcript needs to be placed directly underneath the video, or on a stand-alone page and a link to that transcript page linked directly below the video.

Visual Elements in Videos

Sometimes a video might have charts or other data presented in them. That information will either need to all be read by the presenter (so that it can be captioned), or a full transcript will need to be provided with that same data available in a text format.

After captions are auto-generated by YouTube, you can export them, check them for accuracy, and then add them to your website either below the video or on a new page, with a link to that page below the video.

A11y: What are Text Alternatives?

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. In other words, any visual-based media needs to have a text explanation of what it is. This includes photographs, charts, animations, graphs, sound clips, and video.

Providing text alternatives allows for content to be accessed by multiple users in multiple ways. For example, someone who is blind can have an image’s alternative text read to them, and someone who is deaf can read a video or audio transcript.