Skip to content

Latest commit

 

History

History
131 lines (92 loc) · 3.87 KB

video-has-captions-f51b46.md

File metadata and controls

131 lines (92 loc) · 3.87 KB
Raw
id name rule_type description accessibility_requirements input_aspects authors
f51b46
Video has captions
atomic
This rule checks that captions are available for audio information in non-streaming `video` elements.
DOM Tree
CSS Styling
Audio output
Visual output
Wilco Fiers
Brian Bors

Applicability

The rule applies to every non-streaming video element that is visible where the video contains audio.

Expectation

For each test target, audio information that is not conveyed visually in the video, is available through captions.

Note: Captions can be either embedded in the video file itself or can be made available trough a separate track.

Assumptions

This rule assumes that the video element is used to play a video (for example, not only used to display an image), and that there is a mechanism to start the video.

Accessibility Support

There are no major accessibility support issues known for this rule.

Background

Test Cases

Passed

Passed Example 1

A video element that has captions for all the audio baked into it.

<video src="../test-assets/perspective-video/perspective-video-with-captions.mp4" controls></video>

Passed Example 2

A video element with an associated track element that contain captions for all the audio.

<video src="../test-assets/perspective-video/perspective-video.mp4" controls>
	<track src="/test-assets/perspective-video/perspective-caption.vtt" kind="captions" />
</video>

Failed

Failed Example 1

A video element with any form of captions.

<video src="../test-assets/perspective-video/perspective-video.mp4" controls></video>

Failed Example 2

A video element with an associated track element that contain incorrect captions.

<video src="../test-assets/perspective-video/perspective-keyboard-compatibility-video.mp4" controls>
	<track src="/test-assets/perspective-video/perspective-incorrect-caption.vtt" kind="captions" />
</video>

Failed Example 3

A video element with a text on the same page that described the audio in the video.

<p>
	The video below shows a man working on a keyboard. A voiceover is heard saying the following text: Web accessibility
	perspectives. Keyboard compatibility. Not being able to use your computer because your mouse doesn't work, is
	frustrating. Many people use only the keyboard to navigate websites. Either through preference or circumstance.
</p>
<video src="../test-assets/perspective-video/perspective-keyboard-compatibility-video.mp4" controls></video>

Failed Example 4

A video element with an explicitly associated text on the same page that described the audio in the video.

<p id="text">
	The video below shows a man working on a keyboard. A voiceover is heard saying the following text: Web accessibility
	perspectives. Keyboard compatibility. Not being able to use your computer because your mouse doesn't work, is
	frustrating. Many people use only the keyboard to navigate websites. Either through preference or circumstance.
</p>
<video
	src="../test-assets/perspective-video/perspective-keyboard-compatibility-video.mp4"
	controls
	ariadescribedby="text"
></video>

Inapplicable

Inapplicable Example 1

A video element without audio.

<video src="../test-assets/perspective-video/perspective-video-silent.mp4" controls></video>

Inapplicable Example 2

A video element without that is not visible on the page.

<video src="../test-assets/perspective-video/perspective-video.mp4" controls style="display: none;"></video>