prefers-reduced-motion: reduce leaves loading spinner and skeleton shimmer undefined — remove or simplify?

Direct answers

1. Criterion for essential vs. non-essential: The spec provides no normative list. The accepted practical test is whether the motion is the sole or primary way a functional state is communicated. If removing it leaves the user with no indication that work is happening, it is essential. If the same state is also conveyed by text, ARIA live regions, or a static visual cue, the motion is non-essential.
2. Static/opacity-only replacement for state-communicating animation: Yes, provided the replacement still communicates that an action is in progress and when it completes. A spinner that becomes a static "Processing…" label with an opacity fade, or a checkmark that appears on success, satisfies SC 2.3.3 because the motion itself is removed while the state information remains.
3. Shorten durations or remove spatial movement: Remove spatial movement (translation, scale, rotation, shimmer sweep). Shortening duration alone is insufficient; the reduce keyword signals the user wants less motion, not merely faster motion. Replace spatial effects with opacity fades or immediate visibility.

Likely explanation (author judgment, not spec mandate)

• Loading spinner on payment button — Often essential because it may be the only busy-state feedback. Keep a static indicator (text label, icon, or ARIA aria-busy="true") and replace the rotation with an opacity pulse or a single fade-in.
• Skeleton shimmer while totals recalculate — Typically non-essential decorative motion. The placeholder boxes already communicate "content loading." Replace the shimmer sweep with a static gray background or a subtle opacity fade-in.
• Scroll-driven reveal on order summary — Non-essential spatial movement. Under reduce, show the summary immediately or with a simple opacity: 0 → 1 transition (≤ 200 ms).

Confirmed facts (spec and WCAG)

• Media Queries Level 5 defines prefers-reduced-motion: reduce but does not enumerate essential motion.
• WCAG 2.1 SC 2.3.3 requires that motion triggered by interaction can be disabled unless the motion is essential to the functionality or the information being conveyed.
• SC 2.2.2 (Pause, Stop, Hide) applies to moving, blinking, or scrolling information that starts automatically and lasts more than five seconds; a spinner or shimmer that persists until a network response finishes may fall under this criterion if it cannot be paused.

Steps for this checkout flow

1. Wrap each motion in @media (prefers-reduced-motion: reduce) (CSS) or matchMedia('(prefers-reduced-motion: reduce)') (JS).
2. Spinner: replace @keyframes spin with a static "Processing" label + opacity: 1; keep aria-busy="true" on the button.
3. Skeleton: remove the shimmer @keyframes; set background to a solid neutral gray.
4. Scroll reveal: set opacity: 1 and transform: none immediately; optionally add a 150 ms opacity fade for perceived continuity.
5. Test with Chrome DevTools → Rendering → Emulate CSS media feature prefers-reduced-motion: reduce.
6. Verify with keyboard-only and screen-reader (NVDA/VoiceOver) that state changes are announced or perceivable.
7. Run axe-core (or equivalent) targeting SC 2.3.3 and 2.2.2.

One missing diagnostic detail

Does the payment spinner have an accompanying ARIA live region or text label that announces "Processing payment…" independent of the spinner graphic? If yes, the spinner graphic is non-essential and can be removed entirely. If no, the spinner graphic is the sole busy indicator and must be replaced with a static equivalent.