1

As it I've been asked to add a button to disable animation on my website, according to the WCAG animation criterion (https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html).

The main issue I'm facing is: how should it looks? Is there an icon to represent it explicitely?

Improve this question

1 Answer 1

Reset to default
1

A pause icon is the standard way to do this, positioned close to the animated element. It would be a good practice (if the design allows) to then have a popup that says "do you want to stop all animations on the site?" and then store the answer in a cookie.

For site wide animations another option is having an "accessibility settings" screen as part of the site to toggle it on and off. That way you can have a button that explicitly says "turn off animations" which is better for people who might have trouble understanding iconography (i.e. people with autism sometimes struggle with "abstraction" of imagery and struggle to get the meaning from an icon, although a pause button is probably OK).

prefers-reduced-motion

You should also use the CSS selector prefers-reduced-motion.

That way you can switch animations off automatically for users who have set their OS settings to "reduced motion".

Improve this answer
1
  • I didn't know about prefers-reduced-motion. Many thanks for this complete yet concise answer.
    – enguerranws
    Commented Oct 5, 2020 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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