Update 80f0bf - audio or video avoids automatically playing audio #1655
+215
−3
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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: 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 | ||||||
|
|
@@ -31,9 +31,11 @@ accessibility_requirements: | |||||
| failed: not satisfied | ||||||
| passed: further testing needed | ||||||
| inapplicable: further testing needed | ||||||
| input_aspects: | ||||||
| - DOM Tree | ||||||
| - CSS Styling | ||||||
| - Audio output | ||||||
| - Visual output | ||||||
| acknowledgments: | ||||||
| authors: | ||||||
| - Anne Thyme Nørregaard | ||||||
|
|
@@ -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 | ||||||
| - **audio duration**: the element has a [media resource][] for which the audio output lasts more than 3 seconds. | ||||||
|
There was a problem hiding this comment. This seems slightly ambiguous to me. Should we do this based on the duration property? There was a problem hiding this comment. It does not work based on the duration because the media resource could have a duration longer than 3 seconds, while the audio in the media resource is shorter than 3 seconds. What exactly is ambiguous in the current description? |
||||||
|
|
||||||
| ## 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](#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). | ||||||
|
There was a problem hiding this comment.
Suggested change
My preference, feel free to ignore. There was a problem hiding this comment. I actually think this expectation should go away in favour of #1632 (where I somehow seem to have forgotten to remove it 😖 ) |
||||||
|
|
||||||
| ## Assumptions | ||||||
|
|
||||||
| 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. | ||||||
|
There was a problem hiding this comment. Shouldn't that part go under the Test Cases heading to be in line with #1654 ? Otherwise approving. |
||||||
|
|
||||||
| ## Accessibility Support | ||||||
|
|
||||||
|
|
@@ -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 | ||||||
|
|
||||||
|
|
@@ -89,12 +96,12 @@ This `audio` element has an [instrument][] to pause, stop, or turn the audio vol | |||||
|
|
||||||
| #### Passed Example 2 | ||||||
|
|
||||||
| This `video` element has an [instrument][] to pause, stop, or turn the audio volume off. | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
|
|
||||||
| ```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> | ||||||
| ``` | ||||||
|
|
||||||
|
|
@@ -145,14 +152,119 @@ This `audio` element autoplays, lasts for more than 3 seconds, and does not have | |||||
|
|
||||||
| #### Failed Example 2 | ||||||
|
|
||||||
| 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 | ||||||
|
|
||||||
|
|
@@ -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' | ||||||
|
|
||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I feel like this change requires us to deprecate the 3 previous rules, and have a new one.