Skip to content

video-transcript-1a02b0.md

Latest commit

 

History

History
executable file
·
217 lines (173 loc) · 7.75 KB

video-transcript-1a02b0.md

File metadata and controls

executable file
·
217 lines (173 loc) · 7.75 KB
id 1a02b0
name Audio and visuals of video element have transcript
rules_format 1.1
rule_type atomic
description This rule checks that non-streaming `video` elements have all audio and visual information available in a transcript.
accessibility_requirements
wcag20:1.2.8 wcag-technique:G69 wcag20:1.3.1 wcag20:1.2.1
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
forConformance failed passed inapplicable
false
not satisfied
further testing needed
further testing needed
secondary
This success criterion is **related** to this rule. This is because this criterion applies to a visible transcript.
secondary
This success criterion is **less strict** than this rule. This is because this criterion does not require a transcript when the audio-only or video-only is a media alternative for text and is clearly labeled as such. Some of the failed examples may satisfy this success criterion.
input_aspects
DOM Tree
CSS Styling
Audio output
Visual output
Language
acknowledgments
authors funding assets
Brian Bors
Wilco Fiers
WAI-Tools
Rabbit video is © copyright 2008, Blender Foundation / [www.bigbuckbunny.org](https://www.bigbuckbunny.org)
htmlHintIgnore
tag-pair

Applicability

This rule applies to every non-streaming video element that is visible.

Expectation

The visual information of each test target is available through a text transcript that is included in the accessibility tree, and is either on the page or linked.

Note: A "text transcript" in the context of this rule is defined in WCAG 2 as an alternative for time based media.

Background

Assumptions

  • This rule assumes that a mechanism is available to start the video and that the video element is not simply used to display the poster.
  • Users who are not visually impaired can comprehend the contents of the video through visual cues and information presented visually.

Accessibility Support

There are no accessibility support issues known.

Other Resources

Examples

Passed

Passed Example 1

A video element with a visible text transcript on the same page.

<html lang="en">`
<video controls>
  <source src="/test-assets/rabbit-video/video.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/video.webm" type="video/webm"></source>
</video>
<p>The above video shows a giant fat rabbit climbing out of a hole in the ground.
He stretches, yaws, and then starts walking.
Then he stops to scratch his bottom.</p>
</html>

Passed Example 2

A video element with a link to a text transcript on a different page.

<html lang="en">`
<video controls>
  <source src="/test-assets/rabbit-video/video.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/video.webm" type="video/webm"></source>
</video>
<a href="/test-assets/rabbit-video/transcript.html">Transcript</a>
</html>

Passed Example 3

This video element has a non-visible text transcript available on the same page.

<html lang="en">
<video controls>
  <source src="/test-assets/rabbit-video/video.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/video.webm" type="video/webm"></source>
</video>
<p style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">The above video shows a giant fat rabbit climbing out of a hole in the ground.
He stretches, yaws, and then starts walking.
Then he stops to scratch his bottom.</p>
</html>

Passed Example 4

A video element with an associated track element that contains captions for all the audio and a transcript on the page.

<html lang="en">
	<video src="/test-assets/perspective-video/perspective-video.mp4" controls>
		<track src="/test-assets/perspective-video/perspective-caption.vtt" kind="captions" />
	</video>
	<p>
		Web Accessibility Perspectives: Keyboard Accessibility. Not being able to use your computer because your mouse
		doesn't work, is frustrating. (A computer user's mouse breaks when it falls off the desk.) Many people use only the
		keyboard to navigate websites. Either through preference or circumstance. (A person wearing a sling on her arm
		typing with one hand.)
	</p>
</html>

Failed

Failed Example 1

A video element with an incorrect text transcript on the same page.

<html lang="en">`
<video controls>
  <source src="/test-assets/rabbit-video/video.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/video.webm" type="video/webm"></source>
</video>
<p>The above video shows a giant fat dog climbing out of a hole in the ground.
He stretches, yaws, and then starts walking.
Then he stops to scratch his bottom.</p>
</html>

Failed Example 2

A video element with a link to an incorrect text transcript on a different page.

<html lang="en">`
<video controls>
  <source src="/test-assets/rabbit-video/video.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/video.webm" type="video/webm"></source>
</video>
<a href="/test-assets/rabbit-video/incorrect-transcript.html">Transcript</a>
</html>

Failed Example 3

This video element has a text transcript available on the same page, but the transcript is not included in the accessibility tree.

<html lang="en">
<video controls>
  <source src="/test-assets/rabbit-video/video.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/video.webm" type="video/webm"></source>
</video>
<p aria-hidden="true">The above video shows a giant fat rabbit climbing out of a hole in the ground.
He stretches, yaws, and then starts walking.
Then he stops to scratch his bottom.</p>
</html>

Failed Example 4

A video element with audio does not have a text transcript.

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

Inapplicable

Inapplicable Example 1

A video element that is not visible.

<html lang="en">`
<video controls style="display: none;">
  <source src="/test-assets/rabbit-video/video.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/video.webm" type="video/webm"></source>
</video>
<a href="/test-assets/rabbit-video/transcript.html">Transcript</a>
</html>