Skip to content

Commit

Permalink
update composite to atomic
Browse files Browse the repository at this point in the history
  • Loading branch information
@carlosapaduarte
carlosapaduarte committed Jul 16, 2021
1 parent 500ebc9 commit 2ec57ce
Showing 1 changed file with 141 additions and 18 deletions.
159 changes: 141 additions & 18 deletions _rules/audio-or-video-avoids-automatically-playing-audio-80f0bf.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
id: 80f0bf
name: '`audio` or `video` avoids automatically playing audio'
rule_type: composite
rule_type: atomic
description: |
This rule checks that audio or video that plays automatically does not have audio that lasts for more than 3 seconds or has an audio control mechanism to stop or mute it.
This rule checks that audio or video that plays automatically with audio that lasts for more than 3 seconds has an audio control mechanism to stop or mute it.
accessibility_requirements:
wcag20:1.4.2: # Audio Control (A)
forConformance: true
Expand Down Expand Up @@ -31,9 +31,11 @@ accessibility_requirements:
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
input_rules:
- 4c31df
- aaa1bf
input_aspects:
- DOM Tree
- CSS Styling
- Audio output
- Visual output
acknowledgments:
authors:
- Anne Thyme Nørregaard
Expand All @@ -51,20 +53,23 @@ This rule applies to any `audio` or `video` element for which all the following
- **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.
- **audio duration**: the element has a [media resource][] for which the audio output lasts more than 3 seconds.

## Expectation
## Expectation 1

For each test target, the [outcome](#outcome) of at least one of the following rules is passed:
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.

- [Audio Or Video That Plays Automatically Has A Control Mechanism](https://act-rules.github.io/rules/4c31df)
- [Audio Or Video That Plays Automatically Has No Audio That Lasts More Than 3 Seconds](https://act-rules.github.io/rules/aaa1bf)
## Expectation 2

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

## Assumptions

- This rule assumes that it is not possible to satisfy [Success Criterion 1.4.2 Audio Control][sc142] if the total length of the automatically playing audio is more than 3 seconds, even if there are pauses in the sound and no more than 3 seconds in a row with actual sound.
- This rule assumes that the [mechanism](https://www.w3.org/TR/WCAG21/#dfn-mechanism) to control the sound must be located in the same [web page][]. Mechanisms located on other pages can still create accessibility issues for users relying on sound to navigate (e.g. screen readers users) since the autoplaying sound will interfere with their ability to find and activate the mechanism. If a [mechanism](https://www.w3.org/TR/WCAG21/#dfn-mechanism) external to the [web page][] is provided, it is possible to fail this rule but still satisfy [Success Criterion 1.4.2 Audio Control][sc142].
- This rule assumes that the [mechanism](https://www.w3.org/TR/WCAG21/#dfn-mechanism) to control the sound must be visible and accessible in order to be effective and usable by all kinds of users. If the mechanism is hidden to some users, it is possible to fail this rule but still satisfy [Success Criterion 1.4.2 Audio Control][sc142].
This rule assumes that the [mechanism](https://www.w3.org/TR/WCAG21/#dfn-mechanism) to control the sound must be located in the same [web page][]. Mechanisms located on other pages can still create accessibility issues for users relying on sound to navigate (e.g. screen readers users) since the autoplaying sound will interfere with their ability to find and activate the mechanism. If a [mechanism](https://www.w3.org/TR/WCAG21/#dfn-mechanism) external to the [web page][] is provided, it is possible to fail this rule but still satisfy [Success Criterion 1.4.2 Audio Control][sc142].

This rule assumes that the [mechanism](https://www.w3.org/TR/WCAG21/#dfn-mechanism) to control the sound must be visible and accessible in order to be effective and usable by all kinds of users. If the mechanism is hidden to some users, it is possible to fail this rule but still satisfy [Success Criterion 1.4.2 Audio Control][sc142].

No [user style sheets](https://drafts.csswg.org/css-cascade/#cascade-origin-user) are used and no changes to the [user agent default style sheet](https://drafts.csswg.org/css-cascade/#cascade-origin-ua) are in place, otherwise the test cases might have different outcomes of the ones presented here.

## Accessibility Support

Expand All @@ -74,6 +79,8 @@ The native `video` and `audio` controls in several browser and assistive technol

- [Understanding Success Criterion 1.4.2: Audio Control](https://www.w3.org/WAI/WCAG21/Understanding/audio-control.html)
- [Accessible Multimedia](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia)
- [Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays](https://www.w3.org/WAI/WCAG21/Techniques/failures/F93)
- [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170)

## Test Cases

Expand All @@ -89,12 +96,12 @@ This `audio` element has an [instrument][] to pause, stop, or turn the audio vol

#### Passed Example 2

This `video` element does not play for longer than 3 seconds.
This `video` element has an [instrument][] to pause, stop, or turn the audio volume off.

```html
<video autoplay>
<source src="/test-assets/rabbit-video/video.mp4#t=8,10" type="video/mp4" />
<source src="/test-assets/rabbit-video/video.webm#t=8,10" type="video/webm" />
<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>
```

Expand Down Expand Up @@ -145,14 +152,119 @@ This `audio` element autoplays, lasts for more than 3 seconds, and does not have

#### Failed Example 2

This `video` element audio autoplays for longer than 3 seconds, and does not have an [instrument][] to pause, stop, or mute the audio
This `video` element's audio autoplays for longer than 3 seconds, and does not have an [instrument][] to pause, stop, or mute the audio

```html
<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.

```html
<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.

```html
<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.

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

Expand Down Expand Up @@ -186,6 +298,17 @@ This `audio` element does not play automatically.
<audio src="/test-assets/moon-audio/moon-speech.mp3" controls></audio>
```

#### Inapplicable Example 4

This `video` element does not play for longer than 3 seconds.

```html
<video autoplay>
<source src="/test-assets/rabbit-video/video.mp4#t=8,10" type="video/mp4" />
<source src="/test-assets/rabbit-video/video.webm#t=8,10" type="video/webm" />
</video>
```

[attribute value]: #attribute-value 'Definition of Attribute Value'
[instrument]: #instrument-to-achieve-an-objective 'Definition of Instrument to Achieve an Objective'
[media resource]: https://html.spec.whatwg.org/multipage/media.html#media-resource 'HTML Specification of Media Resource'
Expand Down

0 comments on commit 2ec57ce

Please sign in to comment.