Skip to main content
In tritt das BFSG in Kraft - Ist Deine Website schon fit?Jetzt Website prüfen
Dieser Inhalt ist derzeit nur auf Englisch verfügbar

Audit video-caption

Ensure <video> elements have captions

Impact:

Critical

WCAG-Konformität:

  • A
    WCAG 1.2.2

Issue type:

needs review

Video element auditory content has accessible alternative

This rule checks that `video` elements have an alternative for information conveyed through audio.

Applicability

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

Expectation

For each test target, the outcome of at least one of the following rules is passed:

Background

Assumptions

  • This rule assumes that the video element is used to play synchronized media (video with audio), and that there is a mechanism to start the media.
  • This rule assumes that the language of each test target can be correctly determined (either programmatically or by analyzing the content), and sufficiently understood.

Accessibility Support

There are no accessibility support issues known.

Bibliography

Test Cases

Passed

Passed Example 1

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

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

Passed Example 2

A video element that describes some of the text on the same page. The text on the page labels the video as an alternative.

<html lang="en">
	<p>
		Web Accessibility Perspectives: Keyboard Accessibility. 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. This is solved by keyboard compatibility. Keyboard compatibility is described in WCAG. See the video
		below to watch the same information again in video form.
	</p>
	<video src="/test-assets/perspective-video/perspective-video.mp4" controls></video>
</html>

Failed

Failed Example 1

A video element without any form of captions.

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

Failed Example 2

A video element that describes some of the text on the same page. The video contains more information than the text does.

<html lang="en">
	<p>
		Not being able to use your computer because your mouse doesn't work, is frustrating. Either through preference or
		circumstance. This is solved by keyboard compatibility. Keyboard compatibility is described in WCAG. See the video
		below to watch the same information again in video form.
	</p>
	<video src="/test-assets/perspective-video/perspective-video.mp4" controls></video>
</html>

Inapplicable

Inapplicable Example 1

A video element that is not visible.

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

Inapplicable Example 2

A video element without audio.

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

Autoren: Brian Bors, Wilco Fiers

Finanzierung: WAI-Tools

Assets:

  • Web Accessibility Perspective videos by W3C WAI.