- Scene
- 07
- Take
- 01
- Level
- Intermediate
- Runtime
- ~3 h
Accessibility and Motion Safety
Who motion hurts, prefers-reduced-motion in CSS and JavaScript, the WCAG motion rules, a site motion toggle, focus and screen readers, and the Lumen motion switch.
Motion helps most people and hurts some. For people with a vestibular disorder, a large zoom or a parallax background can cause dizziness and nausea that lasts after the page is closed. For others, a carousel that never stops makes a page impossible to read. This phase teaches who is affected, what triggers it, and how to build motion that stays calm for them.
You learn the tools in the order a team uses them: the prefers-reduced-motion media query, the same setting read from JavaScript (including when it changes), the three WCAG motion rules, and a site-level switch that overrides the device. Then you see what animation does to keyboard focus and screen readers, which no screenshot shows.
You finish by giving the launch page a motion switch in its footer and a small module, motionAllowed(), that every earlier animation (the buttons, the toast and the loading bar) now asks before it moves.
Scene 07 · the brief from Lumen
Ravi, accessibility tester at Lumen Bikes
“I will test every animation you add. If I feel sick, I stop the test and the launch waits.”
Ravi has a vestibular disorder. A fast zoom or a background that drifts against his scroll makes the room tilt, and he can feel unwell for hours afterwards. His phone and his laptop both have reduced motion switched on, so when he opened the launch page the toast faded in instead of sliding, and the buttons only changed colour. He told Kofi that was exactly right.
But Mei's storyboard for the next phases has a scroll story, a page transition and a configurator, all bigger than a toast. Ama wants them alive but calm. Tomás asks whether a whole phase is needed before launch. Ravi answers that the people who need this are not rare, and they do not come back to a site that makes them ill.
Kofi agrees on one rule before more motion is written: every animation asks one function, motionAllowed(). In this phase you build that function, a switch in the footer so visitors can choose for themselves, and the checks that prove the page stays calm.
In this scene
You will learn
- Say who motion hurts, which kinds of movement trigger it, and which kinds are usually safe
- Write reduced-motion CSS that reduces movement without removing meaning
- Read the setting in JavaScript, including when it changes while the page is open
- Apply the WCAG rules for motion (2.3.3, 2.2.2 and 2.3.1) and test for them
- Add a site motion switch that overrides the device and survives blocked storage
You write code in
In your lumen-motion project (npm run dev) and in the editor on this page
Files you touch
- src/styles/motion-safe.css
- src/js/motion/prefers-reduced.js
- index.html
- src/js/main.js
Shot list · 7 shots, widths by reading time
- 7.1Who Motion HurtsLarge movement on a screen can make people with vestibular disorders, migraine or attention differences feel unwell or unable to read. A few kinds of motion cause most of the harm, and quiet changes such as opacity and colour are usually safe. 20 min 3 live
- 7.2prefers-reduced-motion in CSSThe
prefers-reduced-motionmedia query tells your CSS that the visitor asked their device for less movement. The rule is to reduce, not remove: swap travel for a fade and keep every state change. 19 min 2 live - 7.3Reduced Motion in JavaScriptCSS media queries do not reach animation you start from JavaScript. Read the setting with
matchMedia, choose calm keyframes or skip the animation, and listen for the setting changing while the page is open. 17 min 2 live - 7.4The WCAG Rules for MotionThree WCAG success criteria cover motion: 2.3.3 (animation from interactions can be disabled), 2.2.2 (anything that moves by itself for over five seconds can be paused) and 2.3.1 (nothing flashes more than three times a second). Each can be tested with a measurement. 20 min 2 live
- 7.5A Motion Toggle on the SiteA site setting with three choices (follow my device, reduced, full) stored in localStorage and applied as
data-motionon<html>before first paint. It overrides the device setting in both directions and keeps working when storage is blocked. 23 min 2 live - 7.6Motion, Focus and Screen ReadersAnimation changes what is on the screen but not what keyboards and screen readers reach. Move focus on purpose, return it when something closes, announce through a live region that already exists, and make hidden things unreachable with
inert. 18 min 2 live - 7.7Build: The Lumen Motion TogglebuildGive the launch page one question every animation asks,
motionAllowed(), and a footer switch (follow my device, reduced, full) that is saved, applied before first paint and survives blocked storage. The buttons, the toast and the loading bar now obey it. 36 min 1 live
Dailies · 4 checked exercises
A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.
#pause that stops it and starts it again, with aria-pressed showing the state.IntermediateD04Save the motion choice (launch page)Part of Phase 7's build. Write setChoice(value): for reduced or full set data-motion on <html> and save it in localStorage under lumen-motion. For anything else remove the attribute and the saved value.Intermediate