Motion, zoom, reflow and vestibular safety

Reduced motion, pausing and stopping animation, 400 percent zoom and reflow, text spacing, orientation, and target size requirements.

Motion and vestibular safety

/* respect the operating system setting by default */
@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform 200ms ease-out; }
}

/* and reduce, do not simply delete, when motion is unwelcome */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

• Parallax, large scale transitions, spinning loaders and background video are the common triggers. Scale and spin are worse than opacity and short slides.
• Any animation longer than five seconds that plays automatically must have a pause, stop or hide control - and the control must be keyboard reachable.
• Animate transform and opacity rather than width or top. It performs better and it is less likely to move the content the user is reading.
• Reduced motion is a preference, not an absence of design. Replace a slide with a fade rather than removing the feedback entirely.

// read the preference in script when behaviour depends on it
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

function scrollToSection(el) {
  el.scrollIntoView({
    behavior: prefersReducedMotion ? "auto" : "smooth",
    block: "start"
  });
}

Zoom, reflow and text spacing

/* a layout that survives 400 percent zoom on a 1280 px screen */
.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

/* never a fixed height on something that contains text */
.card { min-height: 8rem; }          /* not height: 8rem */

/* images scale with their container and keep their aspect */
.card img { max-width: 100%; height: auto; }

/* and the text-spacing override must not break the layout */
body { line-height: 1.5; }
p + p { margin-block-start: 2em; }

1. Test at 400 percent zoom, which is what the reflow criterion effectively requires on a large screen.
2. Look for horizontal scrolling, clipped content, and elements that overlap when the text grows.
3. Test with a user stylesheet that applies the text-spacing values. Fixed-height rows and nowrap labels break first.
4. Test in portrait on a phone. An orientation lock is easy to add and hard to justify.
5. Check that a sticky header does not cover the focused field when the browser scrolls it into view.

Targets and pointer input

/* make the target large without making the icon large */
.icon-button {
  position: relative;
  inline-size: 24px;
  block-size: 24px;
}

.icon-button::after {
  content: "";
  position: absolute;
  inset: -8px;              /* 40 x 40 effective target */
}

.icon-button svg { inline-size: 100%; block-size: 100%; pointer-events: none; }

/* keep spacing so adjacent targets are not accidentally activated */
.row-actions { display: flex; gap: 12px; }

FAQ

Related

Colour, contrast and accessible visual design Cognitive accessibility: plain language and error recovery

Last refreshed 2026-09-18.