Animation & motion - UX UI Design accessibility WCAG checklist

How to design an animation & motion

WCAG Disabilities

An animation & motion must meet WCAG principles:

1 Perceivable

Color is not used as the only means of conveying meaning - 1.4.1 A
Controls meet atomic level contrast requirements - 1.4.1 A

2 Operable

No content flashes more than three times per second - 2.3.1 A
For content automatically starting, lasting more than 5 seconds pause, stop, hide controls are available - 2.2.2 A
For auto updating information presented in parallel with other content, pause, stop, hide controls are available - 2.2.2 A
Motion triggered by interaction can be disabled (with reduced motion settings)- 2.3.3 AAA
The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
The focus indication is visible (in some way) 2.4.7 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

4 Robust

Name, role, state is documented - 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

An animation & motion must work for people with disabilities:

Cognitive

No content flashes more than three times per second - 2.3.1 A
For content automatically starting, lasting more than 5 seconds pause, stop, hide controls are available - 2.2.2 A
For auto updating information presented in parallel with other content, pause, stop, hide controls are available - 2.2.2 A
Any large sweeping or parallax animation can be disabled (with reduced motion settings)- 2.3.3 AAA
Motion triggered by interaction can be disabled (with reduced motion settings)- 2.3.3 AAA

Low vision

Controls meet atomic level contrast requirements - 1.4.1 A

Color perception

Color is not used as the only means of conveying meaning - 1.4.1 A

Motor

The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
The focus indication is visible (in some way) 2.4.7 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

Blindness

Name, role, state is documented - 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Implementation

Animations and motion should be used sparingly and only to enhance understanding, not for decoration.

Lengthy or repeating animations (like gifs) can be accessible if:

it automatically stops after 5 seconds or
if users are presented with an intuitive way to pause it

Safety

Allow animations to be disabled with CSS

People with vestibular disorders can be made ill by sweeping animations on screen.

It is important to change or disable animations when device reduce motion settings are activated.

This can be accomplished via CSS media query.

@keyframes bounce {
  0% { transform: scale(1); }
  25% { transform: scale(.9); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes dissolve {
  0% { background-color: green; }
  50% { background-color: darkgreen; }
  100% { background-color: green; }
}

.animation {
  background-color: green;
  animation: bounce 2s linear infinite both;
}

@media (prefers-reduced-motion) {
  .animation {
    animation-name: dissolve;
  }
}

<div class="animation">Animated element</div>

Bouncy box

If your device is set to reduce motion, the animation will softly fade from one color to the next instead of bounce; otherwise it will bounce.

Animated element

Detecting with JS

const pref = 
  window.matchMedia(
    '(prefers-reduced-motion: reduce)'
  );

Related animation & motion entries

Web criteria: Animation

Design Animation & motion