Skip to content

Latest commit

 

History

History
162 lines (122 loc) · 3.86 KB

SC1-2-2-video-has-captions.md

File metadata and controls

162 lines (122 loc) · 3.86 KB
Raw
id name description success_criterion test_aspects authors
f51b46
video has captions
Captions are available for audio information in non-streaming `video` elements.
1.2.2
DOM Tree
CSS Styling
Audio output
Visual output
Wilco Fiers
Brian Bors

Test Procedure

Applicability

The rule applies to every non-streaming video element thst 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 backed 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>