Reduced motion in one place
The checker's page has not asked for reduced motion, so the setting reads false. The test passes true for the second line.
Accessibility is not only for screen readers. Check that marks have enough contrast in both themes, that the page reflows at high zoom, that motion respects the reader's setting, and consider sound as another way to hear a trend.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Compute the contrast of #767676 text on white. Is it enough for body text?
Write a function playOne(hz) that plays one half-second note and fades it out.
Explain it without notes
What are the two contrast rules for a chart and what ratios do they need?
Why can colour not be the only signal?
How does the dashboard respect reduced motion in one place?
Why does sonification wait for a click?
Console
(nothing was printed)Expected console output
prefers-reduced-motion is a setting the visitor chose, so the code asks for it: prefersReducedMotion() is boolean
reduced = false | line reveal: 600 ms | bar move: 450 ms | stagger per bar: 10 ms
reduced = true | line reveal: 0 ms | bar move: 0 ms | stagger per bar: 0 ms
The query exists: true