Good Citizens · Usability Harness · Simulator ·
Motion and distraction: what moves, and who it hurts
Movement on a screen is never neutral. It pulls the eye, and for some people it brings on dizziness, nausea or a migraine.
This tool finds everything on a page that moves or plays by itself, checks whether the site listens when someone asks their device for less motion, and pauses it all with one button. It never flashes or plays anything.
I · Who it affects
Dizziness, migraine and a mind pulled away
In one national study, about a third of American adults over 40 showed signs of inner-ear balance problems1 on a simple balance test, and those who also felt dizzy were twelve times as likely to fall.
For people with vestibular disorders, certain kinds of screen motion bring on the same symptoms as a rough sea: things that zoom or spin, backgrounds that scroll at a different speed from the page, and large movements at the edge of vision. The accessibility guidelines name dizziness, nausea and headaches3. About 1.2 billion people6 live with migraine.
Movement also steals attention. About 15.5 million American adults7 have ADHD, and the guidelines note that blinking content can make it hard to concentrate on anything else. Studies of animated advertisements have found they make reading harder work for everyone.
II · Flashing
A cartoon, one evening in 1997
On 16 December 1997, a few seconds of flashing red and blue in an episode of Pokémon sent about 700 people in Japan8, most of them children, to hospital.
Of those with true seizures, three in four had never had one before. Photosensitive epilepsy affects about 3% of people with epilepsy, most often children and teenagers. The web’s rule is plain: nothing should flash more than three times a second5, and saturated red flashes are the most dangerous. This tool does not test for flashing, because testing would mean flashing.
III · The setting
“Reduce motion” is a request
Every major operating system lets people ask for less motion, and since 2017 websites have been able to hear the request.
It is called Reduce motion on Macs, iPhones and iPads, Animation effects on Windows, and Remove animations on Android. Safari first passed it to websites in 2017, and today almost every browser10 does, as the CSS setting prefers-reduced-motion. A site that ignores it is ignoring someone who took the trouble to ask. Reduced motion does not have to mean none: swap a zoom or a slide for a gentle fade.
IV · What to do
What it means for your design
- 01
Make motion opt-out by default
Put decorative animation inside
@media (prefers-reduced-motion: no-preference), so it only runs for people who have not asked for less. - 02
Swap, don’t only remove
For people who ask for less motion, replace zooms, spins and parallax with fades or instant changes.
- 03
Give everything a pause button
Carousels, tickers and looping video that run for more than five seconds need a visible way to pause them (WCAG 2.2.2).
- 04
Never autoplay sound
If audio must start by itself, give a way to stop it within three seconds (WCAG 1.4.2). It drowns out screen readers.
- 05
Never flash
Nothing more than three flashes a second, and avoid saturated red flashing entirely (WCAG 2.3.1).
- 06
Keep motion away from reading
Animation beside text makes reading harder. Keep moving things out of the way of anything people need to read.
V · Prototypes
On prototypes: once it is built
This tool reads the page’s structure, so it needs real text, headings and buttons. A Figma prototype is drawn as a picture, with nothing underneath to read, and the tool will say so rather than report nonsense.
It does work on prototypes built as real pages: Axure, UXPin and Justinmind exports, Framer and Webflow previews, Storybook stories, and apps generated by tools like Figma Make or v0. If the content sits in a frame from another site, the tool offers to open the frame on its own.
VI · Myths
What people get wrong
- A third of adults over 40 have a vestibular disorder
- They failed a balance test, which is a sign of inner-ear dysfunction, not a diagnosis. It is still a great many people.
- Reduce motion means no animation
- It means less and gentler: a fade instead of a slide, a cut instead of a zoom.
- Browsers block autoplay
- Only partly. Muted video may always play by itself in Chrome.
- The Pokémon episode gave 12,000 children seizures
- About 700 people went to hospital. Many more reported milder symptoms, which researchers think were mostly brought on by the news coverage.
Click it on any page to list everything that moves or plays by itself, see whether the site respects “Reduce motion”, and pause it all with one button. Click again to close it.
Works in Chrome, Safari, Firefox and Edge on a computer.
Or all 10 at once
Download the bookmarks fileOne Good Citizens folder with every tool in it. Download it, then import it:
- Chrome: Bookmarks › Import bookmarks and settings › Bookmarks HTML file
- Safari: File › Import From › Bookmarks HTML File
- Firefox: Bookmarks › Manage bookmarks › Import and Backup › Import Bookmarks from HTML
Every time you check a design against the people who will use it, you are doing what Good Citizens is for. Thank you for that.
More tools: Fovea · Colour vision · Ageing eyes · all 10
VII · Sources
The research behind this page
Every figure above comes from one of these 12 sources. The small numbers in the text point here, and each source points back.
Peer-reviewed study
Disorders of balance and vestibular function in US adults: data from the National Health and Nutrition Examination Survey, 2001–2004·
Archives of Internal Medicine
Article
Responsive design for motion·
WebKit blog
Standard
Understanding WCAG 2.3.3: Animation from InteractionsWeb Content Accessibility Guidelines 2.2
Standard
Understanding WCAG 2.2.2: Pause, Stop, HideWeb Content Accessibility Guidelines 2.2
Standard
Understanding WCAG 2.3.1: Three Flashes or Below ThresholdWeb Content Accessibility Guidelines 2.2
Data
Headache disordersFact sheet
Data
ADHD diagnosis and treatment in US adults·
Morbidity and Mortality Weekly Report
Peer-reviewed study
A follow-up survey on seizures induced by animated cartoon TV program “Pocket Monster”·
Epilepsia
Reference
Photosensitivity and seizuresReference
prefers-reduced-motion media queryGuidance
Autoplay policy in Chrome·
Peer-reviewed study
High-cost banner blindness: ads increase perceived workload, hinder visual search, and are forgotten·
ACM Transactions on Computer-Human Interaction