Learn · Case study
The pause button that emptied our pages
Our accessibility control hid the content from the people who used it.
On 8 October 2026 we found that the site's “Pause animations” switch, the control WCAG 2.2.2 asks for, left eight of our pages showing nothing below the header. This is what happened, why every check passed, and the gate that now fails the build if it happens again.
What a paused visitor saw
How the switch works
The switch sets one attribute on the page, and one rule then holds every animation on its current frame. The site restores the setting before the first paint, so a visitor who paused motion once gets it on every page after.
Measured
Many of our page headers fade in from transparent. Held on their first frame, they stay transparent. On /pricing a paused visitor saw the top bar and an empty page. Across 16 routes we measured, 1,198 pieces of text were visible with motion on and invisible with motion paused, on 8 of them: /contracts, /changelog, /labs, /pricing, /spring-validator, /badge, /work and /learn.
Why nothing caught it
The CSS was valid
Every rule did what it said. Nothing in the stylesheet was an error a linter could flag.
The default view was right
With motion on, which is how every test and every reviewer saw the site, the pages rendered correctly.
The failure lived in a setting
It appeared only after a visitor used the control, and only on pages that used the shared fade-in. Our own score engine reads the stylesheet as written, with motion on, so it passed too.
How we found it
We were fixing a smaller defect: under the pause, two status labels on the scoring instrument stayed invisible. To check whether the cause was wider, we loaded each route twice, once with motion on and once with the pause stored the way the switch stores it, and compared which text could be seen. The difference was 1,198 elements.
The fix
Paused means finished
A pause should stop motion and show the finished state. An entrance that starts invisible now jumps to its last frame when motion is paused, which is exactly what a visitor with motion sees once it finishes. Looping animations still hold still, as the switch promises.
The gate
Every entrance that starts invisible says how it pauses
The build lists each animation whose first frame is transparent and fails if one is added without being classified as ending, removed, or decorative.
Pausing must not hide text
In CI, 16 routes are loaded with motion on and paused, and any text visible in the first and invisible in the second fails the build. Run against the site as it was before the fix, it fails on the same 8 pages.
Check your own site
If your site has a pause control or a reduced-motion rule that pauses animations, turn it on and reload a page that fades in. If the content does not appear, the same rule is holding it on its first frame. We plan to add this check to the score engine in its next version, so a score will report it for any URL.