Unstoppable animations fail WCAG 2.1 Success Criterion 2.2.2

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!

OpenDRR / riskprofiler

Unstoppable animations fail WCAG 2.1 Success Criterion 2.2.2 #123

Related links

Viewing/editing Lottie animations