audio or video that plays automatically has a control mechanism


Description

audio or video that plays automatically must have a control mechanism.

Applicability

This rule applies to any audio or video element that has:

  • an autoplay attribute that is equal to true, and
  • both paused and muted attributes equal to false, and
  • either a src attribute or a child source element that references content with a duration of more than 3 seconds that contains audio.

Note:

The default value of both paused and muted attributes is false.

Expectation 1

For each test target a mechanism is provided to pause or stop the audio, or turn the audio volume off independently from the overall system volume control.

Expectation 2

The mechanism 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.

Assumptions

There are currently 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.

Background

Test Cases

Passed

Passed Example 1

The <audio> element has a mechanism to pause or stop or turn the audio volume off.

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

Passed Example 2

The <video> element has a mechanism to pause or stop or turn the audio volume off.

<video autoplay="true" 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

The <video> element has a custom mechanism 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="true">
			<source src="https://act-rules.github.io/test-assets/rabbit-video/video.mp4" type="video/mp4" />
			<source src="https://act-rules.github.io/test-assets/rabbit-video/video.webm" type="video/webm" />
		</video>
		<!-- Video Controls -->
		<div id="video-controls">
			<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>

Failed

Failed Example 1

The <audio> does not have a mechanism to pause or stop or turn the audio volume off.

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

Failed Example 2

The <video> element autoplays and does not have a mechanism to pause or stop or turn the audio volume off.

<video autoplay="true">
	<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

The <video> has a mechanism to pause or stop or turn the audio volume off, but the mechanism 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="true">
			<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">Play</button>
			<button type="button" id="mute">Mute</button>
		</div>
	</div>
	<script src="../test-assets/80f0bf/no-autoplay.js"></script>
</body>

Failed Example 4

The <video> has a mechanism to pause or stop or turn the audio volume off, but the control <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="true">
			<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

The <video> has a mechanism to pause or stop or turn the audio volume off, but the mechanism 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="true">
			<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 <video> element is muted.

<video autoplay="true" muted="true">
	<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 <video> element src file has no audio output.

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

Inapplicable Example 3

The audio element does not autoplay.

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

Glossary

Accessible Name

key: accessible-name

The programmatically determined name of a user interface element that is included in the accessibility tree.

The accessible name is calculated using the accessible name and description computation.

For native markup languages, such as HTML and SVG, additional information on how to calculate the accessible name can be found in HTML Accessibility API Mappings 1.0, Accessible Name and Description Computation (working draft) and SVG Accessibility API Mappings, Name and Description (working draft).

Note: As per the accessible name and description computation, each element always has an accessible name. When no accessible name is provided, the element will nonetheless be assigned an empty ("") one.

Note: As per the accessible name and description computation, accessible names are flat string trimmed of leading and trailing whitespace. Notably, it is not possible for a non-empty accessible name to be composed only of whitespace since these must be trimmed.

Accessibility Support

  • Because the accessible name and description computation is not clear about which whitespace are considered, browsers behave differently when trimming and flattening the accessible name. For example, some browsers completely trim non-breaking spaces while some keep them in the accessible name.
  • There exists a popular browser which does not perform the same trimming and flattening depending whether the accessible name comes from content, an aria-label attribute, or an alt attribute.
  • There exists a popular browser which assign no accessible name (null) when none is provided, instead of assigned an empty accessible name ("").

Examples

Note: The examples presented here are non-normative and not testable. They serve to illustrate some common pitfalls about the definition and help implementers of ACT rules understand it.

The input elements have an accessible name of, respectively, "Billing Name" and "Billing Address". These accessible names are given by the aria-labelledby attributes and associated elements.

<div id="myBillingId">Billing</div>

<div>
	<div id="myNameId">Name</div>
	<input type="text" aria-labelledby="myBillingId myNameId" />
</div>
<div>
	<div id="myAddressId">Address</div>
	<input type="text" aria-labelledby="myBillingId myAddressId" />
</div>

This button element has an accessible name of "Share ACT rules" given by its aria-label attribute.

<button aria-label="Share ACT rules">Share</button>

This img element has an accessible name of "ACT rules" given by its alt attribute.

<img src="#" alt="ACT rules" />

The button element has an accessible name of "Share ACT rules" given by the enclosing label element (implicit label)

<label>Share ACT rules<button>Share</button></label>

The button element has an accessible name of "Share ACT rules" given by the associated label element (explicit label)

<label for="act-rules">Share ACT rules</label><button id="act-rules"></button>

This a element has an accessible name of "ACT rules" given from its content. Note that not all semantic roles allow name from content.

<a href="https://act-rules.github.io/">ACT rules</a>

This span element has an empty accessible name ("") because span does not allow name from content.

<span>ACT rules</span>

This span element has an empty accessible name ("") because span is not a labelable element.

<label>ACT rules<span></span></label>

Note: When the same element can have an accessible name from several sources, the order of precedence is: aria-labelledby, aria-label, own attributes, label element, name from content. The examples here are listed in the same order.

Note: For more examples of accessible name computation, including many tricky cases, check the Accessible Name Testable Statements.

Included in the accessibility tree

key: included-in-the-accessibility-tree

Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet the requirements of the individual user.

The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are included in the accessibility tree can be found in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted with using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

Examples

Note: The examples presented here are non-normative and not testable. They serve to illustrate some common pitfalls about the definition and help implementers of ACT rules understand it.

This span element is included in the accessibility tree (by default, elements are included in the accessibility tree).

<span>ACT rules</span>

This span element is not included in the accessibility tree because it is hidden to everybody by the CSS property.

<span style="display:none">ACT rules</span>

This span element is not included in the accessibility tree because it is explicitly removed by the aria-hidden attribute.

<span aria-hidden="true">ACT rules</span>

This span element is positioned off screen, hence is not visible, but is nonetheless included in the accessibility tree.

<span style="position: absolute; top:-9999em">ACT rules</span>

Although the span element with an id of "label" is not itself included in the accessibility tree, it still provides an accessible name to the other span, via the aria-labelledby attribute. Thus, it is still indirectly exposed to users of assistive technologies. Removing an element from the accessibility tree is not enough to remove all accessibility concerns from it since it can still be indirectly exposed.

<span id="label" style="display:none">ACT rules</span>
<span aria-labelledby="label">Accessibility Conformance Testing rules</span>

Although this input element is not included in the accessibility tree, it is still focusable, hence users of assistive technologies can still interact with it by sequential keyboard navigation. This may result in confusing situations for such users (and is in direct violation of the fourth rule of ARIA (working draft)).

<input type="text" aria-hidden="true" name="fname" />

Outcome

key: outcome

A conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

  • Inapplicable: No part of the test subject matches the applicability
  • Passed: A test target meets all expectations
  • Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementers using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such "interim" results can be expressed with the incomplete outcome.

Visible

key: visible

Content perceivable through sight.

Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

Content is defined in WCAG.

Examples

Note: The examples presented here are non-normative and not testable. They serve to illustrate some common pitfalls about the definition and help implementers of ACT rules understand it.

This span element is visible (by default, elements are visible).

<span>Now you can see me!</span>

This span element is not visible because of the CSS visibility property.

<span style="visibility: hidden">I'm the invisible man</span>

This span element is not visible because of the CSS display property.

<span style="display: none">I'm the invisible man</span>

This span element is not visible because it is positioned off-screen

<span style="position: absolute; top: -9999px; left: -9999px;">Incredible how you can</span>

This span element is not visible because it contains only whitespace and line breaks.

<span>
	<br />
	&nbsp;
</span>

This span element is not visible because it has the exact same color as its background.

<span style="color: #00F; background: #00F;">See right through me</span>

Whitespace

key: whitespace

Characters that have the Unicode "White_Space" property in the Unicode properties list.

This includes:

  • all characters in the Unicode Separator categories, and
  • the following characters in the Other, Control category:

    • Character tabulation (U+0009)
    • Line Feed (LF) (U+000A)
    • Line Tabulation (U+000B)
    • Form Feed (FF) (U+000C)
    • Carriage Return (CR) (U+000D)
    • Next Line (NEL) (U+0085)

Useful Links



Acknowledgements

Table of Contents