Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update 80f0bf - audio or video avoids automatically playing audio #1655

Open
wants to merge 52 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 40 commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
2c9e229
update audio or video avoids automatically playing audio
carlosapaduarte Jun 18, 2021
f0e2241
update type and description
carlosapaduarte Jun 18, 2021
728538c
update frontmatter
carlosapaduarte Jun 18, 2021
9ef2873
Revert "update frontmatter"
carlosapaduarte Jul 16, 2021
63b4d64
Revert "update type and description"
carlosapaduarte Jul 16, 2021
2cc646d
Revert "update audio or video avoids automatically playing audio"
carlosapaduarte Jul 16, 2021
500ebc9
deprecate no longer used rules
carlosapaduarte Jul 16, 2021
2ec57ce
update composite to atomic
carlosapaduarte Jul 16, 2021
f3035e0
update description of passed example 2
carlosapaduarte Jul 16, 2021
2e5d3d1
Replace expectation about the instrument being accessible with a back…
carlosapaduarte Jul 16, 2021
32cf772
Revert "Replace expectation about the instrument being accessible wit…
carlosapaduarte Sep 6, 2021
b12416b
Revert "update description of passed example 2"
carlosapaduarte Sep 6, 2021
63cfbf1
Revert "update composite to atomic"
carlosapaduarte Sep 6, 2021
eb43a2d
Deprecate the composite rule
carlosapaduarte Sep 6, 2021
b79d068
new atomic to replace the composite and two atomics
carlosapaduarte Sep 6, 2021
5d90f12
made editorial changes
carlosapaduarte Jan 17, 2022
1fbcd53
Merge branch 'develop' into update-80f0bf
carlosapaduarte Jan 17, 2022
1b3791b
Merge branch 'develop' into update-80f0bf
carlosapaduarte Jan 24, 2022
ee1e021
Update frontmatter of deprecated rules
carlosapaduarte Jan 24, 2022
ad6778b
Merge branch 'develop' into update-80f0bf
carlosapaduarte Feb 2, 2022
3a86ac0
Update _rules/audio-or-video-avoids-automatically-playing-audio-x0paj…
carlosapaduarte Feb 2, 2022
064b7f8
Replace mechanism with instrument in the assumptions
carlosapaduarte Feb 2, 2022
682fe7d
Update background headings
carlosapaduarte Feb 2, 2022
5c0fec1
Merge branch 'develop' into update-80f0bf
carlosapaduarte Feb 9, 2022
0a67ec7
Merge branch 'develop' into update-80f0bf
carlosapaduarte Feb 11, 2022
8af6aea
Merge branch 'develop' into update-80f0bf
carlosapaduarte Feb 16, 2022
6943774
Merge branch 'develop' into update-80f0bf
carlosapaduarte Feb 18, 2022
7bfbffe
Merge branch 'develop' into update-80f0bf
carlosapaduarte Feb 25, 2022
81b7f48
Merge branch 'develop' into update-80f0bf
carlosapaduarte Mar 8, 2022
a654300
Merge branch 'develop' into update-80f0bf
carlosapaduarte Mar 25, 2022
4fc3ff6
Update _rules/audio-or-video-avoids-automatically-playing-audio-x0paj…
carlosapaduarte Mar 30, 2022
f73fed1
Update _rules/audio-or-video-avoids-automatically-playing-audio-x0paj…
carlosapaduarte Mar 30, 2022
bd29173
Update _rules/audio-or-video-avoids-automatically-playing-audio-x0paj…
carlosapaduarte Mar 30, 2022
777d1f8
Update _rules/audio-or-video-avoids-automatically-playing-audio-x0paj…
carlosapaduarte Mar 30, 2022
2b17759
Update _rules/audio-or-video-avoids-automatically-playing-audio-x0paj…
carlosapaduarte Mar 30, 2022
de3e4f9
update example descriptions
carlosapaduarte Mar 30, 2022
3c05a2f
Removed examples checking different SC
carlosapaduarte Mar 30, 2022
51d8c1b
Remove unnecessary style
carlosapaduarte Mar 30, 2022
ec0521d
Remove outdated accessibility support note
carlosapaduarte Mar 30, 2022
42a68c3
Rephrased assumption
carlosapaduarte Mar 30, 2022
3b92b94
Merge branch 'develop' into update-80f0bf
carlosapaduarte May 13, 2022
4bb7d79
Add <dfn> to applicability conditions and update inapplicable examples
carlosapaduarte Jan 9, 2023
f53dad9
Add inapplicable example of long video with short audio, and test res…
carlosapaduarte Jan 9, 2023
2850665
Merge branch 'develop' into update-80f0bf
Jan 9, 2023
8b69d82
Update _rules/audio-or-video-avoids-automatically-playing-audio-x0paj…
Jan 13, 2023
83abb41
Update accessibility support note with further explanation
carlosapaduarte Jan 13, 2023
a5fd2da
Move and merge assumption note into background note
carlosapaduarte Jan 13, 2023
d060379
Replace MDN resource with WAI resource
carlosapaduarte Jan 13, 2023
07a01e5
Fix spelling
carlosapaduarte Jan 13, 2023
efa91bf
Update _rules/audio-or-video-avoids-automatically-playing-audio-x0paj…
Feb 8, 2023
f0eee9a
Merge branch 'develop' into update-80f0bf
Sep 14, 2023
af10ed2
Merge branch 'develop' into update-80f0bf
Jan 24, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: 80f0bf
name: '`audio` or `video` avoids automatically playing audio'
name: DEPRECATED - '`audio` or `video` avoids automatically playing audio'
Jym77 marked this conversation as resolved.
Show resolved Hide resolved
rule_type: composite
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.
Expand Down Expand Up @@ -43,6 +43,8 @@ acknowledgments:
assets:
- 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.
deprecated: |
This rule has been deprecated and superceded by Rule [`audio` or `video` avoids automatically playing audio](https://act-rules.github.io/rules/x0paj4). This rule is not maintained anymore and should not be used.
htmlHintIgnore:
# https://www.npmjs.com/package/htmlhint
# (used with `npm test` to ensure validity of code snippets)
Expand Down
198 changes: 198 additions & 0 deletions _rules/audio-or-video-avoids-automatically-playing-audio-x0paj4.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
---
id: x0paj4
name: '`audio` or `video` avoids automatically playing audio'
rule_type: atomic
description: |
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
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
wcag-text:cc5: # Non-interference due to mapping to 1.4.2
title: WCAG Non-Interference
forConformance: true
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
wcag-technique:G60: # Playing a sound that turns off automatically within three seconds
forConformance: false
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
wcag-technique:G170: # Providing a control near the beginning of the Web page that turns off sounds that play automatically
forConformance: false
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
wcag-technique:G171: # Playing sounds only on user request
forConformance: false
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
input_aspects:
- DOM Tree
- CSS Styling
- Audio output
- Visual output
acknowledgments:
authors:
- Carlos Duarte
previous_authors:
- Anne Thyme Nørregaard
- Bryn Anderson
htmlHintIgnore:
# https://www.npmjs.com/package/htmlhint
# (used with `npm test` to ensure validity of code snippets)
- '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
- **audio duration**: the element has a [media resource][] for which the audio output lasts longer than 3 seconds.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can use dfn elements for the condition list (and possibly link to the correct condition from corresponding examples).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added dfn elements and updated inapplicable examples accordingly


## Expectation

For each test target, there is at least one [instrument][] in the same [web page][] to pause, stop, or mute the audio.

## Assumptions

This rule assumes that it is not sufficient for the [instrument][] to control the sound to be located on a different [web page][], or a different state of the same [web page][] to pass the rule. [Instruments][instrument] located on other pages can still create accessibility issues for users relying on sound to navigate (e.g. screen reader users) since the autoplaying sound will interfere with their ability to find and activate the [instrument][]. If an [instrument][] external to the [web page][] is provided, this rule will fail but it is still possible to satisfy [Success Criterion 1.4.2 Audio Control][sc142].

This rule assumes that the [instrument][] to control the sound is visible and accessible in order to be effective and usable by all kinds of users. If the [instrument][] is hidden to some users, it is possible to pass this rule but still not satisfy [Success Criterion 1.4.2 Audio Control][sc142].
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should that be merged with the Background note on the same topic?
I'm not sure this needs to be an Assumption (since we do have a "further testing needed" mapping already).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done


## Accessibility Support
WilcoFiers marked this conversation as resolved.
Show resolved Hide resolved

Some major browsers no longer automatically play the 'video' unless the 'video' is muted.
carlosapaduarte marked this conversation as resolved.
Show resolved Hide resolved

## Background

The [instruments][instrument] used to pass this rule (if any), must meet all level A Success Criteria in order to fully satisfy [Success Criterion 1.4.2 Audio Control][sc142]. These extra requirements are left out of this rule, and should be tested separately.

### Bibliography

- [Understanding Success Criterion 1.4.2: Audio Control](https://www.w3.org/WAI/WCAG21/Understanding/audio-control.html)
WilcoFiers marked this conversation as resolved.
Show resolved Hide resolved
- [Accessible Multimedia](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to link to MDN from a W3C site?
Is there some similar W3C document we could link to instead?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good suggestion!

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

### Passed

#### Passed Example 1

This `audio` element has its default controls as an [instrument][] to pause, stop, and mute the audio.

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

#### Passed Example 2

This `video` element has its default controls as an [instrument][] to pause, stop mute the audio.

```html
<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 autoplays and has an [instrument][] to pause, stop, or mute the audio.

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

This `audio` element autoplays, lasts for more than 3 seconds, and does not have an [instrument][] to pause, stop, or mute the audio.

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

#### Failed Example 2
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This example somewhat contradicts the idea that whether a failed example fails shouldn't depend on accessibility support. I'm a little worried this example could block implementations that run in Chromium. I know that could happen in axe Pro (although we have no tools testing this today). I'm pretty sure Trusted Tester would be impacted though, as it is tested in Edge.

So from that angle I'm not sure I would want this example in. On the other hand, not having a failed video example in it feels like a problem too. We could possibly wait with this rule until we have this "optional examples" idea worked out. A different option could be to modify the rule so that it isn't just about autocomplay, but more generally about media elements that start playing without user interaction within the first 3 second of the page loading? That feels like a reasonable improvement on this rule anyway, and we could then add videos that get turned on through a script during onload.


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>
WilcoFiers marked this conversation as resolved.
Show resolved Hide resolved
<source src="/test-assets/rabbit-video/video.mp4" type="video/mp4" />
<source src="/test-assets/rabbit-video/video.webm" type="video/webm" />
</video>
```

### Inapplicable
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

#### Inapplicable Example 1

This `video` element's audio autoplays for longer than 3 seconds but is `muted`.

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

This `video` element has no audio output.

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

```html
<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'
[sc142]: https://www.w3.org/TR/WCAG21/#audio-control 'Success Criterion 1.4.2 Audio Control'
[web page]: #web-page-html 'Definition of HTML web page'
4 changes: 3 additions & 1 deletion _rules/auto-play-audio-does-not-exceed-3-seconds-aaa1bf.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
carlosapaduarte marked this conversation as resolved.
Show resolved Hide resolved
id: aaa1bf
name: '`Audio` or `video` that plays automatically has no audio that lasts more than 3 seconds'
name: DEPRECATED — '`Audio` or `video` that plays automatically has no audio that lasts more than 3 seconds'
rule_type: atomic
description: |
`audio` or `video` that plays automatically does not output audio for more than 3 seconds.
Expand All @@ -24,6 +24,8 @@ acknowledgments:
assets:
- 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.
deprecated: |
This rule has been deprecated and superceded by Rule [`audio` or `video` avoids automatically playing audio](https://act-rules.github.io/rules/x0paj4). This rule is not maintained anymore and should not be used.
---

## Applicability
Expand Down
4 changes: 3 additions & 1 deletion _rules/auto-play-audio-has-control-mechanism-4c31df.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: 4c31df
name: '`audio` or `video` that plays automatically has a control mechanism'
name: DEPRECATED — '`audio` or `video` that plays automatically has a control mechanism'
rule_type: atomic
description: |
audio or video that plays automatically must have a control mechanism.
Expand Down Expand Up @@ -28,6 +28,8 @@ htmlHintIgnore:
# https://www.npmjs.com/package/htmlhint
# (used with `npm test` to ensure validity of code snippets)
- 'title-require'
deprecated: |
This rule has been deprecated and superceded by Rule [`audio` or `video` avoids automatically playing audio](https://act-rules.github.io/rules/x0paj4). This rule is not maintained anymore and should not be used.
---

## Applicability
Expand Down