Vestibular disorders make animation harmful; respect prefers-reduced-motion.
The guidance#
Gate every animation: motion-safe:animate-bounce. Kill transitions globally with motion-reduce:transition-none on frequently-animated roots. Skeletons: pause the shimmer.
In markup#
<div class="motion-safe:animate-bounce motion-reduce:animate-none">🎉</div>Checklist#
- Tested with keyboard only
- Screen-reader spot check
- Contrast verified for new pairs
- Reduced-motion behavior confirmed
- Zoomed to 200% without loss
Related#
accessibility/index|Accessibility hub · utilities/interactivity/sr-only|sr-only