A visitor's reduced-motion preference can guide a website toward a still or less-moving presentation, but a CSS media query does not automatically stop every animation or video. Design the alternative deliberately and test the actual page. The still version should preserve the essential visual information rather than showing an empty first frame from the motion sequence.
Define what the motion contributes
List whether the portrait's movement is decorative, demonstrates a before-and-after change or reveals information. Put necessary information into ordinary page text and a reviewed still where appropriate. A static alternative should let the visitor understand the offer without waiting for motion.
Keep the original moving asset and a separately approved still. A random video frame may show a blink, incomplete transition or unrecognizable subject. Choose the visual fallback for its intended purpose and identify the relationship between the still and the moving artwork honestly.
Check implementation scope
MDN's prefers-reduced-motion reference describes detecting the user's preference through the CSS media feature. The website implementation must decide how that affects its components. Do not assume that applying one rule to CSS animation also pauses an HTML video or a third-party player.
Ask the implementation owner to list actual motion sources: CSS effects, animated images, native video and embedded players. Choose a supported alternative for each relevant source. A pause control and a preference-responsive default can serve different purposes; verify what the visitor actually sees rather than treating them as interchangeable.
A hypothetical portrait-page check
Imagine a portfolio hero with a moving portrait and a title explaining the treatment. The proposed test views the page with normal and reduced-motion preferences. The reduced-motion presentation uses an approved still showing the recognizable subject, while the title and viewing choices remain available.
Record initial visual, continuing motion, essential information and optional controls in each state. This is a proposed implementation test, not a page already verified. Inspect the actual video behavior and any animated decorative overlay separately. A stopped overlay is insufficient if the background film still moves unexpectedly.
Approve meaning and behavior separately
Accept when the reduced-motion state has the planned behavior and preserves the information needed to understand the page. Reject an empty fallback, lost explanation or a preference claim that the actual player ignores. Test a fresh page load and the intended supported device settings.
Flashing effects need their own assessment; a preference-responsive still is not proof that the moving version meets flash requirements or full accessibility conformity. Save the approved moving and still assets with the implementation note. Imagild's Skills can develop the visual concept; motion preference handling and website integration are external. The useful alternative is complete, deliberate and verified on the page that visitors receive.