Respect reduced motion preferences
SkillMediareduced-motion is an agent skill for accessibility review of rendered HTML, interactive components, and design-system patterns. It guides an agent to check that animations respect the prefers-reduced-motion media query, then to inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant. It explains how motion affects users
Available today. Use it from your connected AI after setup.
No other account needed.
Have the skill available to the agent alongside the HTML, components, or design-system patterns to review.
Then ask your AI: use the Respect reduced motion preferences skill
What your AI can do with it
- Check that animations respect the prefers-reduced-motion media query
- Flag content that flashes more than 3 times per second as a seizure risk
- Suggest replacing motion with opacity or color transitions under reduced motion
- Identify parallax and scrolljacking effects that lack alternatives
- Review markup and interactive states, flagging exact elements, roles, and labels
- Explain how motion affects users with vestibular disorders and photosensitive epilepsy
Getting started
- Have the skill available to the agent alongside the HTML, components, or design-system patterns to review.
- Ask the agent to review the rendered markup for reduced-motion compliance, starting with native semantics.
- Have it check keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- Ask it to flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule.
- Consult references/rule.md for implementation details, code examples, and framework-specific guidance.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/reduced-motion/SKILL.md and read by ahel’s review.
Animations can trigger vestibular disorders, migraines, and seizures—respecting motion preferences makes your site usable for millions of affected users.
Quick Reference
- Use prefers-reduced-motion media query to disable non-essential animations
- Never flash content more than 3 times per second (seizure risk)
- Replace motion with opacity/color transitions when reduced motion is enabled
- Provide user controls to pause or disable animations
Check
Verify that animations respect prefers-reduced-motion, no content flashes more than 3 times per second, parallax and scrolljacking effects have alternatives, and motion warnings appear before pages with excessive animation.
Fix
Use @media (prefers-reduced-motion: reduce) to disable animations. Ensure no flashing exceeds 3 flashes/second. Avoid motion behind static text. Provide motion warnings for immersive experiences.
Explain
Explain how motion affects users with vestibular disorders, photosensitive epilepsy, and cognitive disabilities, and why providing motion controls and warnings is essential for inclusive design.
Code Review
Review the rendered markup and interactive states that affect Respect reduced motion preferences. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/accessibility/reduced-motion
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- What should be checked first when reviewing reduced motion?
- Native semantics are checked first, then keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- How can animations be disabled for users who prefer reduced motion?
- Use the @media (prefers-reduced-motion: reduce) rule to disable animations, and replace motion with opacity or color transitions when reduced motion is enabled.
Advanced
- Item type
- skill
- Key
reduced-motion- Source
- github.com/thedaviddias/front-end-checklist