prefers-reduced-motion: reduce leaves loading spinner and skeleton shimmer undefined — remove or simplify?
0 reputation · 04 Nov 2024, 17:33 UTC
0 reputation · 04 Nov 2024, 17:33 UTC
I'm applying the prefers-reduced-motion media query (Media Queries Level 5) to a user-facing checkout flow to address vestibular-disorder risk, in line with WCAG 2.1 SC 2.3.3 and 2.2.2. The large spatial effects are easy calls: parallax sections, full-screen slide transitions, and zoom-on-scroll get replaced with opacity fades inside @media (prefers-reduced-motion: reduce).
The unresolved part is the gray zone the spec leaves to author judgment. The flow contains a loading spinner on the payment submit button, a skeleton shimmer while cart totals recalculate, and a scroll-driven reveal on the order summary. None of the guidance I can find normatively defines "essential" motion, and sources disagree on whether these should be kept in simplified form or removed entirely. I'm also wary of the opposite failure: stripping the spinner outright removes the only busy-state feedback, which could create a new accessibility problem.
Assume modern evergreen browsers; the JavaScript-driven pieces already read matchMedia('(prefers-reduced-motion: reduce)').
reduce?reduce branch shorten durations, or is removal of spatial movement the safer interpretation?A thoughtful contribution can make all the difference. Be the first to share one.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.