Animation respects reduce-motion settings

Motion animation triggered by an interaction can be disabled

Design Notes

Provide a way to disable non-essential motion animation

People may be adversely affected by page animations, such as parallax effects when scrolling or animations triggered by user clicks. Such animations can trigger vestibular disorders, causing reactions such as dizziness, nausea and headaches.

Avoid using unnecessary animation where possible. Provide a control such as a button or toggle for users to turn off non-essential animations from user interaction.

Developer Notes

Make use of the 'prefers-reduced-motion' CSS media query

If a user has requested a reduce motion setting on their operating system, then using the 'prefers-reduced-motion' CSS Media Query will respect that choice and CSS can be applied to disable the motion.

Testing Notes

Ensure that non-essential animation can be disabled

Steps to check

For each interactive element that moves due to a user interaction:

• enable the 'Reduce Motion' setting in the operating system
• check tha the modion is not essential
• check that the element does not move

Impact range: Medium

Test type: Manual

WCAG Reference: Understanding Success Criterion 2.3.3 Animations from Interactions