Reduced-motion preferences should alter distracting or essential movement while retaining useful state feedback. Removing animation must not remove meaning.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: Replace a sweeping transition with an immediate state change and a stable progress label. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify meaningful feedback
Separate the information ‘loading’ from decorative spinning or sweeping movement.
Step 2: Adapt movement
Under prefers-reduced-motion, remove or simplify distracting animation while keeping the status visible.
Step 3: Preserve completion behavior
The loader must still dismiss when ready or on its bounded timeout; animation completion cannot be its only exit.
Worked scenario
Replace a sweeping transition with an immediate state change and a stable progress label.
A loader keeps its ‘Loading articles’ text while its spinner stops under reduced motion. Its JavaScript readiness and timeout behavior remain unchanged. This means users still understand the pending state and reach content without waiting for an animation event that no longer fires.
Common mistake
A loader whose only signal is movement may become ambiguous when animation stops.
Verify the behavior
Enable reduced motion, load a fresh session and delay resources. Verify visible status and eventual dismissal; retain the site’s loader.
Interview exercise
Preserve a loading indicator accessibly.
Answer and reasoning
Keep clear status text or a static indicator, and ensure motion preferences do not prevent completion or dismissal.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.