A pause button and the reduced-motion rule
Press the button, or Tab to it and press Enter. The table is the rule for every combination. In the browser's developer tools you can emulate prefers-reduced-motion: reduce to see the other half.
Motion can make people ill and distract those who read. Honour the reduced-motion setting, give a pause button to anything that moves for more than five seconds, and stop drawing when nothing changes.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write mayMove for the rule in this topic.
Write the code that reacts when the visitor changes the system setting while the page is open.
Explain it without notes
What does prefers-reduced-motion: reduce tell you, and what should a 3D page change because of it?
Which WCAG rule requires a pause button on a turntable, and what exactly must the button do?
Console
Nothing logged yet.Expected console output
reduced paused started by user moves?
false false false true
false true false false
true false false false
true false true true
true true true false