A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Accessible Motion and Reduced-Motion Preferences | Reduced motion is not the same as removing all visual feedback. Preserve state clarity while reducing travel, parallax, and looping motion. |
| Production test | Real content and constraints | The rule works only for the demo values |
| Maintenance | Scope and override path | A later fix creates another exception |
In production, Reduced motion is not the same as removing all visual feedback. Preserve state clarity while reducing travel, parallax, and looping motion. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
<style>@media (prefers-reduced-motion: reduce) { .panel { animation:none; transition:none; } }</style><main class="panel">Example content</main>
Engineering judgment: Treat prefers-reduced-motion as a user constraint that may coexist with the same layout and interaction model.
<style>.panel[hidden] { display:none; }</style><main class="panel">Example content</main>
A good CSS change narrows the problem. Treat prefers-reduced-motion as a user constraint that may coexist with the same layout and interaction model. This keeps the rule understandable when content, theme, or viewport conditions change later.
In production, Reduced motion is not the same as removing all visual feedback. Preserve state clarity while reducing travel, parallax, and looping motion. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
<style>@media (prefers-reduced-motion: reduce) { .card { transition-duration:.01ms; } }</style><main class="card">Example content</main>
Shorten motion is useful here because it demonstrates accessible motion and reduced-motion preferences under a concrete input rather than as an abstract property list.
<style>.spinner { animation:spin 1s linear infinite; }</style><main class="spinner">Example content</main>
Avoid infinite motion is useful here because it demonstrates accessible motion and reduced-motion preferences under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 30 XP.