Skip to content

video-only-transcript-ee13b5.md

Latest commit

 

History

History
executable file
·
209 lines (164 loc) · 7.29 KB

video-only-transcript-ee13b5.md

File metadata and controls

executable file
·
209 lines (164 loc) · 7.29 KB
id ee13b5
name Video element visual-only content has transcript
rule_type atomic
description Non-streaming `video` elements without audio must have all visual information available in a transcript.
accessibility_requirements
wcag-technique:G159 wcag20:1.3.1 wcag20:1.2.1
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 any non-streaming video element that is visible where the video does not contain audio.

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.

Assumptions

  • 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.

Background

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

Bibliography

Test Cases

Passed

Passed Example 1

This video element, which has no audio, has a visible text transcript available on the same page.

<html lang="en">
<video controls>
  <source src="/test-assets/rabbit-video/silent.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/silent.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, yawns, and then starts walking.
Then he stops to scratch his bottom.</p>
</html>

Passed Example 2

This video element, which has no audio, has a transcript which conveys information included in the video-only content. The transcript is available through a link on the same page.

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

Passed Example 3

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

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

Failed

Failed Example 1

This video element, which has no audio, has an incorrect text transcript available on the same page.

<html lang="en">
<video controls>
  <source src="/test-assets/rabbit-video/silent.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/silent.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, yawns, and then starts walking.
Then he stops to scratch his bottom.</p>
</html>

Failed Example 2

This video element, which has no audio, has an incorrect text transcript available through a link on the same page.

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

Failed Example 3

This video element, which has no audio, has a text transcript available on the same page, but the transcript is not visible.

<html lang="en">
<video controls>
  <source src="/test-assets/rabbit-video/silent.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/silent.webm" type="video/webm"></source>
</video>
<p style="text-indent: -9999px;">This video shows a giant fat rabbit climbing out of a hole in the ground.
He stretches, yawns, and then starts walking.
Then he stops to scratch his bottom.</p>
</html>

Failed Example 4

This video element, which has no audio, 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/silent.mp4" type="video/mp4"></source>
  <source src="/test-assets/rabbit-video/silent.webm" type="video/webm"></source>
</video>
<p aria-hidden="true">This video shows a giant fat rabbit climbing out of a hole in the ground.
He stretches, yawns, and then starts walking.
Then he stops to scratch his bottom.</p>
</html>

Inapplicable

Inapplicable Example 1

This video element has audio.

<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>

Inapplicable Example 2

This video element is not visible.

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