qa-detect-reduced-motion

To check CSS for missing prefers-reduced-motion support, scan stylesheets for animation and transition rules that are not gated by the media query. This detects motion effects that ignore user preferences and violate accessibility expectations.

Animations violate WCAG 2.3.3 reduced motion requirements when they play without being wrapped in a prefers-reduced-motion media query. This includes parallax effects, autoplay UI, and CSS transitions that lack motion preference gating.

Auditing a component library for reduced-motion accessibility requires inspecting frontend stylesheets for animation and transition patterns. The process flags any motion effects or autoplay-driven UI that lacks prefers-reduced-motion media query coverage.

You can detect parallax and autoplay UI that ignores reduced-motion preferences by scanning web pages for animation and transition rules. The review flags motion effects that are not properly wrapped in reduced-motion media queries.

It does not apply to frontend stylesheets that have no animation or transition rules. The detection requires the presence of motion effects to check for missing prefers-reduced-motion media query coverage.

CSS transitions cause issues for motion-sensitive users when they are not wrapped in a prefers-reduced-motion media query. Playing animations without checking user motion preferences can cause motion sickness and reduce accessibility compliance.