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

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.

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.