If a link has an animated hover state, e.g. an arrow that moves from left to the right and back, or as is in this example on CodePen is it still compliant with WCAG 2.2.2 Pause, Stop, Hide guideline?

The animation lasts as long as the user hovers the element. I know that it is a small element, so not sure if it is important at all.

  • 1
    Quick critique: because you shrink the element, if the user puts their mouse somewhere other than the middle circle, the element will quickly bounce between entering and leaving the state, and leaving the button unclickable.
    – lights0123
    May 5 at 22:59

The part of the animation that starts automatically lasts less than 5 seconds. The part that runs indefinitely is controlled by the user (can be stopped by not hovering). It appears to meet the criteria.

The animation is cool, but is it enhancing the usability of the element? Beyond the WCAG guidelines, it's important to look at whether an animation might be distracting, which could be an obstacle for users with attention-related disabilities. You might consider a Reduced Motion alternative option for users who prefer it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.