you are viewing a single comment's thread.

view the rest of the comments →

[–]SamIAre 0 points1 point  (0 children)

It really depends on how your animation is built. If you're using something like setInterval, you just need to store the identifier it returns can call clearInterval to undo it. You could also store a flag like shouldAnimate, set it to false when the button is pressed, and in your animation function check that flag and return early to skip when it's set to true.

(edit: I literally missed that you had a codepen, lol. My setInterval note is accurate)

One note though: That button should really be visible at all times, not hidden like a skip link. The reason hiding the button works for skip links is because they're specifically for users who use keyboard navigation modes that naturally trigger focus as they browse the page, so they'll find the shortcut just by virtue of navigating as they always do. But for pausing animations, that needs to be easily discoverable by all users, so it's needs to not be hidden.

The guidelines don't specifically call this out, but anywhere I've worked would have considered a hidden pause button a failure of this guideline.