Skip to content

auto-play-audio-has-control-mechanism-4c31df.md

Latest commit

 

History

History
executable file
·
287 lines (235 loc) · 8.2 KB

auto-play-audio-has-control-mechanism-4c31df.md

File metadata and controls

executable file
·
287 lines (235 loc) · 8.2 KB
id 4c31df
name Audio or video element that plays automatically has a control mechanism
rules_format 1.1
rule_type atomic
description audio or video that plays automatically must have a control mechanism.
accessibility_requirements
wcag-technique:G170
forConformance failed passed inapplicable
false
not satisfied
further testing needed
further testing needed
input_aspects
DOM Tree
CSS Styling
Audio output
Visual output
acknowledgments
authors funding assets
Anne Thyme Nørregaard
Bryn Anderson
WAI-Tools
Rabbit video is © copyright 2008, Blender Foundation / [www.bigbuckbunny.org](https://www.bigbuckbunny.org)
JFK's "We Choose the Moon" speech excerpt is courtesy of NASA.
htmlHintIgnore
title-require

Applicability

This rule applies to any audio or video element for which all the following are true:

  • (autoplay) the element has an autoplay attribute value of true; and
  • (not muted) the element has a muted attribute value of false; and
  • (not paused) the element has a paused attribute value of false; and
  • (duration) the element has a media resource lasting more than 3 seconds and that contains audio.

Expectation 1

For each test target, there is at least one instrument in the same web page to pause or stop the audio, or turn the audio volume off independently from the overall system volume control.

Expectation 2

The instrument to pause or stop or turn the audio volume off is visible, has an accessible name that is not only whitespace, and is included in the accessibility tree.

Background

Assumptions

There are no assumptions.

Accessibility Support

The native video and audio controls in several browser and assistive technology combinations are not keyboard accessible and the video or audio element itself may not be announced. Authors are recommended to use custom controls for keyboard navigation and cross browser accessibility support in general.

Bibliography

Examples

Passed

Passed Example 1

This audio element has an instrument to pause, stop, or turn the audio volume off.

<audio src="/test-assets/moon-audio/moon-speech.mp3" autoplay controls></audio>

Passed Example 2

This video element has an instrument to pause, stop, or turn the audio volume off.

<video autoplay controls>
	<source src="/test-assets/rabbit-video/video.mp4" type="video/mp4" />
	<source src="/test-assets/rabbit-video/video.webm" type="video/webm" />
</video>

Passed Example 3

This video element has a custom instrument to pause or stop or turn the audio volume off.

<head>
	<style>
		button {
			color: #000;
		}
		button:hover {
			cursor: pointer;
			cursor: pointer;
			background-color: grey;
			color: white;
		}
	</style>
</head>
<body>
	<div id="video-container">
		<!-- Video -->
		<video id="video" autoplay>
			<source src="/test-assets/rabbit-video/video.mp4" type="video/mp4" />
			<source src="/test-assets/rabbit-video/video.webm" type="video/webm" />
		</video>
		<!-- Video Controls -->
		<div id="video-controls">
			<button type="button" id="play-pause" class="play">Pause</button>
			<button type="button" id="mute">Mute</button>
		</div>
	</div>
	<script src="/test-assets/80f0bf/no-autoplay.js"></script>
</body>

Failed

Failed Example 1

This audio element does not have an instrument to pause, stop, or turn the audio volume off.

<audio src="/test-assets/moon-audio/moon-speech.mp3" autoplay></audio>

Failed Example 2

This video element autoplays and does not have an instrument to pause, stop, or turn the audio volume off.

<video autoplay>
	<source src="/test-assets/rabbit-video/video.mp4" type="video/mp4" />
	<source src="/test-assets/rabbit-video/video.webm" type="video/webm" />
</video>

Failed Example 3

This video element has an instrument to pause, stop, or turn the audio volume off but the instrument is not visible.

<head>
	<style>
		button {
			color: #000;
			display: none;
		}
		button:hover {
			cursor: pointer;
			cursor: pointer;
			background-color: grey;
			color: white;
		}
	</style>
</head>
<body>
	<div id="video-container">
		<!-- Video -->
		<video id="video" autoplay>
			<source src="/test-assets/rabbit-video/video.mp4" type="video/mp4" />
			<source src="/test-assets/rabbit-video/video.webm" type="video/webm" />
		</video>
		<!-- Video Controls -->
		<div id="video-controls">
			<button type="button" id="play-pause" class="play">Pause</button>
			<button type="button" id="mute">Mute</button>
		</div>
	</div>
	<script src="/test-assets/80f0bf/no-autoplay.js"></script>
</body>

Failed Example 4

This video element has an instrument to pause, stop, or turn the audio volume off but its button elements do not have accessible names.

<head>
	<style>
		button {
			color: #000;
		}
		button:hover {
			cursor: pointer;
			cursor: pointer;
			background-color: grey;
			color: white;
		}
	</style>
</head>
<body>
	<div id="video-container">
		<!-- Video -->
		<video id="video" autoplay>
			<source src="/test-assets/rabbit-video/video.mp4" type="video/mp4" />
			<source src="/test-assets/rabbit-video/video.webm" type="video/webm" />
		</video>
		<!-- Video Controls -->
		<div id="video-controls">
			<button type="button" id="play-pause" class="play"></button>
			<button type="button" id="mute"></button>
		</div>
	</div>
	<script src="/test-assets/80f0bf/no-autoplay.js"></script>
</body>

Failed Example 5

This video element has an instrument to pause, stop, or turn the audio volume off but the instrument is not included in the accessibility tree.

<head>
	<style>
		button {
			color: #000;
		}
		button:hover {
			cursor: pointer;
			cursor: pointer;
			background-color: grey;
			color: white;
		}
	</style>
</head>
<body>
	<div id="video-container">
		<!-- Video -->
		<video id="video" autoplay>
			<source src="/test-assets/rabbit-video/video.mp4" type="video/mp4" />
			<source src="/test-assets/rabbit-video/video.webm" type="video/webm" />
		</video>
		<!-- Video Controls -->
		<div id="video-controls" aria-hidden="true">
			<button type="button" id="play-pause" class="play">Play</button>
			<button type="button" id="mute">Mute</button>
		</div>
	</div>
	<script src="/test-assets/80f0bf/no-autoplay.js"></script>
</body>

Inapplicable

Inapplicable Example 1

The audio of this video element autoplays for longer than 3 seconds but is muted.

<video autoplay muted>
	<source src="/test-assets/rabbit-video/video.mp4" type="video/mp4" />
	<source src="/test-assets/rabbit-video/video.webm" type="video/webm" />
</video>

Inapplicable Example 2

The src file of this video element has no audio output.

<video autoplay>
	<source src="/test-assets/rabbit-video/silent.mp4" type="video/mp4" />
	<source src="/test-assets/rabbit-video/silent.webm" type="video/webm" />
</video>

Inapplicable Example 3

This audio element does not autoplay.

<audio src="/test-assets/moon-audio/moon-speech.mp3" controls></audio>