Avoid continuous or looping animations that can't be paused
Provide pause controls for any ambient animation
Be especially careful with vestibular triggers: zooming, spinning, parallax
Implementation Checklist
Tested with prefers-reduced-motion: reduce enabled
No vestibular triggers (excessive zoom, spin, parallax)
Looping animations can be paused
Functional animations have non-motion alternatives
Users can complete all tasks with animations disabled
1---2name: 1192-accessibility-1cb43ec73description: Accessibility4---5# Accessibility67**This is not optional.** Motion can cause discomfort, nausea, or distraction for many users.89---1011## Respect User Preferences1213```css14@media (prefers-reduced-motion: reduce) {15 *,16 *::before,17 *::after {18 animation-duration: 0.01ms !important;19 animation-iteration-count: 1 !important;20 transition-duration: 0.01ms !important;21 scroll-behavior: auto !important;22 }23}24```2526**What this does**: Effectively disables animations while preserving final states (so layouts don't break).2728---2930## Functional vs. Decorative Motion3132| Type | Purpose | Reduced Motion Behavior |33|------|---------|------------------------|34| **Functional** | Indicates state changes, spatial relationships, orientation | May need alternative (instant state change, no transition) |35| **Decorative** | Pure delight, visual interest | Can be fully removed |3637**The test**: Does removing this animation break the user's ability to understand what happened? If yes, it's functional.3839---4041## Motion Sensitivity Considerations4243- Avoid large-scale motion (full-screen transitions, parallax)44- Avoid continuous or looping animations that can't be paused45- Provide pause controls for any ambient animation46- Be especially careful with vestibular triggers: zooming, spinning, parallax4748---4950## Implementation Checklist5152- [ ] Tested with `prefers-reduced-motion: reduce` enabled53- [ ] No vestibular triggers (excessive zoom, spin, parallax)54- [ ] Looping animations can be paused55- [ ] Functional animations have non-motion alternatives56- [ ] Users can complete all tasks with animations disabled
Run npx skillmds@latest add tools-only/1192-accessibility-1cb43ec7 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Accessibility It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tools-only (@tools-only) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tools-only