Unstoppable animations fail WCAG 2.1 Success Criterion 2.2.2

[anthonyfok]

Pierre Dubois (@duboisp) kindly received me during WET Office hours, Heures de service de la BOEW on 2023-12-19, during which he briefly reviewed https://www.riskprofiler.ca/ and noticed the looping animated logo which the end-user is unable to stop. This behaviour fails WCAG 2.1 Success Criterion 2.2.2:

Moving content can also be a severe distraction for some people. Certain groups, particularly those with attention deficit disorders, find blinking content distracting, making it difficult for them to concentrate on other parts of the Web page. Five seconds was chosen because it is long enough to get a user's attention, but not so long that a user cannot wait out the distraction if necessary to use the page.

See https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html for in-depth discussions and recommended solutions for WCAG 2.1 SC 2.2.2 compliance.

The logo animation is currently coded as follows:

<div id="header-logo-block-1" class="block-type-animation fw-block first-of-type">
  <div id="header-logo-block-1-animation" class="animation" data-anim-loop="true"
    data-anim-in-view="false" data-anim-rewind="false"
    data-anim-path="site/assets/uploads/2021/10/lf20_mmrbfbcv.json">
</div>

where https://www.[riskprofiler.ca/site/assets/uploads/2021/10/lf20_mmrbfbcv.json is Lottie file which plays 241 frames at 24 fps, i.e. a ~10-second animation:

{
    "v": "5.7.1",
    "fr": 24,
    "ip": 0,
    "op": 240,
    "w": 320,
    "h": 320,
    "nm": "logo-red-header",
    "ddd": 0,
    "assets": [
        ...

Special thanks to Pierre (@duboisp) for bringing this to my attention!

Related links

• LottieFiles: Download Free lightweight animations for website & apps.
• Web Accessibility (ADA, WCAG, Section 508) - Lottie in Web - Let's talk Lottie

Viewing/editing Lottie animations

• Lottie Creator: Create Lottie animations with ease - LottieFiles (though it does not support Trim paths, Matte Masks, and Merge Path features used in lf20_mmrbfbcv.json)
• Figma, including the web version, supports the LottieFiles plugin which can import an existing Lottie file and plays it perfectly.