Pause, Stop, Hide

Who it affects

Motion pulls the eye. For people with attention disorders it makes the rest of the page hard to read, and a slide that changes mid-sentence takes the words away.

What a scan checks

• On one page of each kind, with reduced motion off: looping animations, autoplaying video, and slideshows whose slide changes over 6 seconds. A pause button nearby passes, and loading placeholders are left alone.

How it gets fixed

• A Pause button goes before the moving element. It stops the animations, video and slideshow inside, and starts paused for shoppers whose device asks for reduced motion. The next scan presses it to check.
• A small control that repeats a short animation, such as a wiggling or shining buy button, gets a rule in SiteRemora's stylesheet that lets it play and then stop within 5 seconds, so no button is needed.

Every change is shown before it is applied, recorded with the code it replaced, and reverts in one click.

Before and after, on real stores

Found by our scanner on live Shopify stores and fixed in a test browser with the same change the app makes. The stores are described rather than named, and their names are taken out of the code.

<a href="/products/…" class="common_button wiggle">Order now</a>

<!-- the theme's CSS repeats a wiggle
     animation on it for as long as the
     page is open -->

/* assets/siteremora.css */
body:not(#sr-remora) a.common_button.wiggle {
  animation-iteration-count: 1 !important;
}