Motion accessibility
Reduced motion without lost state
A component-level approach to removing travel, rotation, squash, and animated settling while preserving focus, selection, loading, and validation information.
By Gummy UI · Published
Identify what motion is doing
Motion in Gummy UI can indicate a press, a state transition, a loading process, or a short material response. Before reducing it, the implementation needs to identify whether the animation carries information. A button squash is feedback layered on top of native activation; a spinner rotation accompanies a named status; a focus ring communicates state even when its transition disappears.
This inventory prevents a common mistake: disabling the entire component or hiding an indicator when the user requests less motion. The preference should remove unnecessary travel and temporal effects while the control, message, and current state remain available.
Neutralise transforms as well as durations
Setting transition-duration to zero is not always enough. An active selector may still apply a scale, translation, or rotation for the instant it matches, leaving a control visibly compressed during interaction. Gummy UI’s reduced-motion rules explicitly neutralise relevant transforms and animations for presses, indicators, loading tides, and rotating marks.
The static replacement still needs contrast and shape. A selected checkbox keeps its check, a radio keeps its dot, validation keeps its text and status treatment, and a spinner remains a named status even when it no longer rotates. Reduced movement is not reduced meaning.
Keep focus immediate
Focus visibility should not depend on a slow glow arriving after the keyboard user has moved. Under reduced motion, the final focus treatment appears without an animated journey. Overlays still move focus according to their primitive contract even if their entrance and exit transitions are removed.
This distinction separates motion preference from interaction behavior. Focus containment, restoration, roving focus, and dismissal are not decorative animations. They remain necessary for the component to operate, while visual movement around those changes can be simplified.
Verify the preference in context
A stylesheet search can confirm that a reduced-motion media query exists, but it cannot prove every active component looks correct. Review should enable the operating-system or browser preference, exercise real controls, and inspect loading, focus, open, selected, and validation states at representative widths.
The current registry verifier checks that shared material payloads include reduced-motion rules, and component tests inspect selected contracts. A complete release record still needs browser evidence. The accessibility page deliberately describes this layered model rather than turning the presence of one media query into a universal compatibility claim.