Making motion accessible

Animation helps communicate a selection, an element appearing or an action completing. Navigation, controls and content are available from the first frame. Space for a logo or illustration is reserved before playback.

Decorative loops pause offscreen and in a hidden tab. Returning to a section does not undo a user’s manual pause.

The system’s prefers-reduced-motion reports the visitor’s preference. Site settings complement it; reduced motion takes priority. Show the original static state instead of a decorative loop.

Pause and reduced motion do not hide success or error states. Keep frame-by-frame inspection and downloads available in the asset library.

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

• Check keyboard access and visible focus on playback controls.
• Enable reduced motion in the system and site settings.
• Pause a loop, leave its area and return: it should stay paused.
• Do not start audio without a user action.

Materials and sources

• SkiMobile motion rules
• Accessibility standard
• prefers-reduced-motion — MDN