Moving Text Can Be Paused
MUST: Auto-scrolling tickers/marquees that run more than 5s alongside other content need a pause/stop/hide control (WCAG 2.2.2) and must stop under prefers-reduced-motion. Toggle animation-play-state and expose aria-pressed on the button.
Auto-scrolling tickers, marquees, and looping text need a pause control and must honor reduced-motion
@media (prefers-reduced-motion: reduce){ .ticker{ animation: none } }
<button aria-pressed={paused} onClick={toggle}>Pause</button>Bad
Good
Why it matters
A marquee or news ticker that scrolls on its own is a moving target the reader cannot catch — worse for anyone with a vestibular disorder, low vision, or a reading disability, for whom the movement is not decoration but an obstacle. WCAG 2.2.2 makes it concrete: anything that moves automatically for more than five seconds alongside other content must offer a pause, stop, or hide control.
Two things satisfy it together: a visible Pause button (toggle animation-play-state, and expose aria-pressed), and a prefers-reduced-motion: reduce rule that stops the animation entirely for users who asked the OS to. Auto-motion is a convenience you offer, never one you impose.