Rule idea: video element avoids automatically playing moving content

dd8 commented 1 year ago

id: name: rule_type: atomic description: | This rule checks that video that plays automatically does not have movement lasting for more than 5 seconds or has a control mechanism to stop or pause the video. accessibility_requirements: # Remove whatever is not applicable wcag20: 2.2.2: # Pause, Stop, Hide (A) forConformance: true failed: not satisfied passed: further testing needed inapplicable: further testing needed wcag-text:cc5: # Non-interference due to mapping to 2.2.2 title: WCAG Non-Interference forConformance: true failed: not satisfied passed: further testing needed inapplicable: further testing needed input_aspects:

DOM Tree

acknowledgments: authors:
- Mark Rogers

Applicability

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

autoplay: the element has an autoplay attribute value of true; and not paused: the element has a paused attribute value of false; and duration: the element has a media resource lasting more than 5 seconds and that contains moving video. parallel: there is other information presented in parallel to the video

Expectation (1)

Each target element has a control mechanism allowing the user to stop or pause the video.

Assumptions

This rule assumes that it is not possible to satisfy [Success Criterion 2.2.2 Pause, Stop, Hide][sc222] if the total length of the automatically playing video is more than 5 seconds, even if there are still sections in the video and no more than 5 seconds in a row with movement. This rule assumes that the mechanism to control the video 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 2.2.2 Pause, Stop, Hide][sc222].

Accessibility Support

There are no accessibility support issues known.

Background

The instrument used to pass this rule (if any), must meet all level A Success Criteria in order to fully satisfy [Success Criterion 2.2.2 Pause, Stop, Hide][sc222]. These extra requirements are left out of this rule, and should be tested separately.

Bibliography

Test Cases

Passed

Passed Example 1

This video element audio autoplays for longer than 5 seconds, but has a controls attribute which provides an instrument to pause or stop the video.

<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>
<p>This is some content presented in parallel.</p>

Passed Example 2

This video element audio autoplays for longer than 5 seconds, but has an instrument to pause or stop the video.

<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">Play</button>
            <button type="button" id="pause">Mute</button>
        </div>
    </div>
    <script src="/test-assets/80f0bf/no-autoplay.js"></script>
</body>

Failed

Failed Example 1

This video element audio autoplays for longer than 5 seconds, and has no instrument to pause or stop the video.

<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>
<p>This is some content presented in parallel.</p>

Failed Example 2

This video element audio autoplays for longer than 5 seconds and is muted, and has no instrument to pause or stop the video.

<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>
<p>This is some content presented in parallel.</p>

Failed Example 3

The video element is shorter than 5 seconds but loops indefinitely, and has no instrument to pause or stop the video.

<video autoplay loop>
    <source src="/test-assets/short-video/video.mp4" type="video/mp4" />
    <source src="/test-assets/short-video/video.webm" type="video/webm" />
</video>
<p>This is some content presented in parallel.</p>

Inapplicable

Inapplicable Example 1

This video element does not autoplay.

<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>
<p>This is some content presented in parallel.</p>

Inapplicable Example 2

The video element is shorter than 5 seconds and does not loop.

<video autoplay>
    <source src="/test-assets/short-video/video.mp4" type="video/mp4" />
    <source src="/test-assets/short-video/video.webm" type="video/webm" />
</video>
<p>This is some content presented in parallel.</p>

Inapplicable Example 3

This video element audio autoplays for longer than 5 seconds, but has no content presented in parallel.

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

dd8 commented 1 year ago

WCAG quick checks include video in Moving, Flashing, or Blinking Content https://www.w3.org/WAI/test-evaluate/preliminary/#moving

And some folks who flag autoplay video as a fail of 2.2.2: https://lists.w3.org/Archives/Public/w3c-wai-ig/2019OctDec/0073.html https://www.digital.govt.nz/standards-and-guidance/design-and-ux/accessibility/accessible-videos/what-makes-a-video-accessible/autoplay-is-disabled/

Jym77 commented 1 year ago

Looks good. We need somebody to open the Pull Request and shepherd it to completion. The content is pretty much already here 😄

act-rules / act-rules.github.io