Motion principles for accessibility

Be conservative about the use of animations especially if it affects a large part of the screen.  Animations can be visually disorientating and can even make people feel sick. User-initiated animation is much better received for system status and visual feedback and learning spatial relationships on a site. We should allow the user to control the experience on screen.


Motion basics

Motion basics

Avoid scroll jacking, parallax and autoplay of videos, gifs, or audio unless it adds to the experience.  If there are automatic animations you must provide the user with the option to turn it off, and it cannot loop.

There are built-in controls in the operating system preferences to reduce motion on devices and on desktop. If the user has this enabled, the fall back is to make it static, while retaining the same message, meaning, or impact. by using a media query. 

The human eye sees about 200 frames per second so you should use 30 frames per second to make it as seamless as possible. Designers and developers, be sure to follow the motion principles standard as a whole.

Avoid scroll jacking, parallax and autoplay of videos, gifs, or audio unless it adds to the experience.  If there are automatic animations you must provide the user with the option to turn it off, and it cannot loop.

There are built-in controls in the operating system preferences to reduce motion on devices and on desktop. If the user has this enabled, the fall back is to make it static, while retaining the same message, meaning, or impact. by using a media query. 

The human eye sees about 200 frames per second so you should use 30 frames per second to make it as seamless as possible. Designers and developers, be sure to follow the motion principles standard as a whole.


Motion & content writing

Motion & content writing

Content practitioners need to ponder the related content for elements in motion and/or for the reduced motion alternatives. 

If a reduced motion alternative is decided upon by the user experience or development team member, an alternative/descriptive text will need to be written and translated.

If the element in motion, alternative text, captions, or descriptive video text may need to written and translated.

Content practitioners need to ponder the related content for elements in motion and/or for the reduced motion alternatives. 

If a reduced motion alternative is decided upon by the user experience or development team member, an alternative/descriptive text will need to be written and translated.

If the element in motion, alternative text, captions, or descriptive video text may need to written and translated.


Motion preferences in your OS & browsers

Motion preferences in your OS & browsers

As developers, be aware of how browsers allow users to customize their experience. Many operating systems and browsers support reduced motion, autoplay restrictions, and more are being considered each day.

At the OS level you have for example on Mac OSX the Reduce Motion setting:

Many browsers support the @prefers-reduced-motion media query. You can use it to create a less intrusive alternative to the animation or micro-animation. Replace the movement with a static image or light, graceful fade.

Resources:

As developers, be aware of how browsers allow users to customize their experience. Many operating systems and browsers support reduced motion, autoplay restrictions, and more are being considered each day.

At the OS level you have for example on Mac OSX the Reduce Motion setting:

Many browsers support the @prefers-reduced-motion media query. You can use it to create a less intrusive alternative to the animation or micro-animation. Replace the movement with a static image or light, graceful fade.

Resources:


Explore the experience

Explore the experience

User Impact references:

User Impact references:


Explore more

Explore more