Animation

How to test an animation

Gherkin Condensed WCAG

Given that I am on a page with an animation

1 Keyboard for mobile & desktop

WHEN I use tab key to move focus to the pause/play/hide controls I SEE the control is strongly visibly focused
Then when I use the spacebar or enter key to activate the control I SEE the intended action occurs
Then when I use the device's reduced motion settings I SEE the animation is disabled or reduced

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use tab key to move focus to the pause/play/hide controls
- I HEAR The control's purpose (pause/play/hide) is clear
- I HEAR It identifies its role of button
- I HEAR The control expresses its state if applicable (pressed, expanded)
Then when I use the spacebar or enter key to activate the control I HEAR the intended action occurs
Then when I use the device's reduced motion settings I HEAR the animation is disabled or reduced

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to move focus to the pause/play/hide controls
- I HEAR The control's purpose (pause/play/hide) is clear
- I HEAR It identifies its role of button
- I HEAR The control expresses its state if applicable (pressed, expanded)
Then when I doubletap to activate control I HEAR the intended action occurs
Then when I when animation is focused I HEAR I HEAR An alternative method of consumption or interaction is available

4 Device settings

When I use Reduced motion I SEE Large motion, animations or effects are reduced or eliminated

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Where applicable, focus moves directly to pause/play/hide controls
Spacebar	Activates the control
Enter	Activates the control
Reduced motion settings	Animation is disabled or reduced

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the control
Doubletap	Activates the button

3 Screenreader output for all devices

Reads	I hear
Name	The control's purpose (pause/play/hide) is clear
Role	It identifies its role of button
State	The control expresses its state if applicable (pressed, expanded)

4 Device settings

When I use	I see
Reduced motion	Large motion, animations or effects are reduced or eliminated

An animation must meet these WCAG principles.

1Perceivable

Color is not used as the only means of conveying information (error, success, etc)

2Operable

Is keyboard operable (if controls are required)
The click/tap target area is no smaller than 44x44px
The disabled and focus states have a 3:1 minimum contrast ratio against default
The focus indication has a 3:1 minimum contrast ratio against adjacent elements
The focus indication has a minimum area equal to the width of the element and 2px in height

3Understandable

Any control's purpose is clear in the context of the whole page

4Robust

The animation respects device reduce motion settings and still conveys any critical information
Meets criteria across platforms, devices and viewports

Developer notes

Animations (like animated gifs or animated SVG) can be accessible if:

it automatically stops after 5 seconds or
if users are presented with an intuitive way to pause it
it has alt text or an alternative method of consumption is available

Code examples

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)'
  );