Which approach demonstrates respecting users who prefer reduced motion in CSS?

• A. Always show animations
• B. @media (prefers-reduced-motion: reduce) { animation: none; }
• C. Prefer dark theme
• D. Disable grid when reduced motion

Answer: (B)

Respecting users who prefer reduced motion means honoring their system setting in CSS by using a media query that detects prefers-reduced-motion and adjusts styles accordingly. The best approach is to wrap the motion-causing styles in @media (prefers-reduced-motion: reduce) { ... }, for example turning off animations with animation: none;. This directly respects the user’s accessibility preference, preventing unwanted motion and potential discomfort, and it works across modern browsers.

Other options don’t address motion preferences: always showing animations ignores the user’s setting, a dark theme relates to color but not motion, and disabling grid for reduced motion doesn’t respond to the motion preference and can break layout.