Animations and accessibility

Animations on a website can really be helpful, as it can help guide the user on the web page. For example there are a category of people with cognitives disabilities that can be really helped of thoughtful animations.
A good animation can make it easier to see what's changed and also show relations between different part of the user interface.

But there are also people with different kinds of seizure disorders where animations can be a disorder trigger.
So we need to ensure our websites helps both categories.

This can be done with the prefers-reduced-motion media query. The user can select a preference in their OS for reduced motions. This setting is communicated to the websites via the media query.

It doesn't need to be difficult at all to use. Each time you use an animation, think through if it perhaps should be disabled for people who prefers reduced motion.

Here is how it can be done:

.item {
	animation: earthquake 2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.item {
		animation: none;
	}
}

I also have put together two examples on Codepen. One who demonstrates the use of prefers-reduced-motion with css and one who demonstrates it with javascript. To test out how they differs you can read Mozilla's article which describes how to change this setting on different OS.

An example of using the prefers-reduced-motion media query in css.

An example of using the prefers-reduced-motion media query in javascript.

Read more / sources:

• https://www.w3.org/TR/WCAG21/#pause-stop-hide
• https://www.w3.org/WAI/WCAG21/Techniques/css/C39.html
• https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
• https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
• https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/