Accessibility

Motion is the one part of the design language that can make a page physically unusable — vestibular disorders turn a decorative slide into nausea, and a looping animation that can’t be stopped is a WCAG failure regardless of how good it looks. Both rules below are met by default when you use the transition tokens; the work is remembering them for anything that doesn’t.

Reduced motion

Always respect prefers-reduced-motion (WCAG 2.3.3). Users who enable “reduce motion” in their OS settings may experience motion sickness, vestibular disorders, or simply prefer less animation.

Note

This is already handled globally in our transition tokens, but you may need to override specific animations in components that don’t use the tokens.

.details::details-content {
  transition: block-size var(--tng-transition-duration-f)
    var(--tng-transition-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .details::details-content {
    transition-duration: 0.01ms;
  }
}

Note

Use 0.01ms instead of none to preserve @starting-style and other transition-dependent features while making the animation imperceptible.

Auto-playing content

• Never auto-play animations that last longer than 5 seconds without giving the user a way to pause or stop them (WCAG 2.2.2).
• Avoid flashing content that flashes more than 3 times per second (WCAG 2.3.1).