Two ways to get it wrong

The first is to ignore the setting: the strip moves anyway. The second looks considerate and is not: the strip is frozen, but the items beyond the edge are now unreachable, because nothing scrolls. A visitor who asked for less motion has lost content.

What Ribbonfly Marquee does

When the visitor's device asks for reduced motion, the strip:

  1. starts standing still, with no animation at all;
  2. becomes scrollable by hand along its length, with a scrollbar, so the last item can be reached by touch, trackpad or keyboard;
  3. shows only one copy of the items, because the second copy that makes the loop would be a repeat;
  4. shows its button as Play, so the visitor can choose to start the motion.

If they press Play the strip takes over from the start and moves as normal, and the button turns back into Pause.

What if the script does not run?

The style sheet alone does the safe part. The animation is attached only after the script has measured the strip, and a rule for reduced motion keeps it switched off until the visitor asks for it. Without the script the strip stands still and scrolls by hand. The items then appear twice in a row, because the copy that makes the loop is only hidden once the script runs; nothing is lost and nothing moves. The button, which needs the script to do anything, is not shown.

Testing it

Most operating systems have a setting for it, called something like Reduce motion or Show animations. Switch it on, reload the page, and the strip should be still. In Chrome's developer tools you can also emulate the preference from the rendering panel without changing your system settings.

The related requirement for pausing is in the WCAG 2.2.2 guide.