Motion and distraction
A background scrolling at its own speed can bring on nausea.
Try it here
Press “Check this page’s motion”. It lists everything here that moves or plays by itself, and pauses it all with one button.
Why should I care?
Things that move or flash can make some people dizzy or sick, and others lose their place. Let them stop it.
- A thirdof American adults over 40 showed signs of balance problems.
- 1.2 billionpeople live with migraine.
- 15.5 millionAmerican adults have ADHD.
What to do on your website
- Give every slideshow a pause button.
- Turn motion down when people ask for less.
- Never let anything flash.
More, if you want it
Check your own website with this tool
This is the button you’ll drag.
- Make sure you can see your bookmarks bar, the row just under the address bar. If it isn’t there, press Ctrl + Shift + B, or ⌘ + Shift + B on a Mac.
- Drag the Motion check button up into that bar and let go.
- Open your own website and click Motion check in the bar. 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.
This works on a computer, in Chrome, Safari, Firefox or Edge. Phones and tablets have no bookmarks bar, so there are three other ways below.
On a phone or tablet
iPhone or iPad, from the Share button
- Copy the tool:
- Open the Shortcuts app, make a new shortcut, and add the action Run JavaScript on Web Page. Paste the tool in place of its sample script.
- In the shortcut’s details, turn on Show in Share Sheet, and name it Motion check.
- Once: in Settings, open Apps › Shortcuts › Advanced and turn on Allow Running Scripts.
- On your website in Safari, tap Share, then Motion check.
Android, from Chrome’s address bar
- Copy the tool:
- Bookmark any page with the star, then edit that bookmark: name it gc motion check and paste the tool in as its address.
- On your website, type gc motion check in the address bar and tap the starred bookmark it suggests. Choosing it from the bookmarks list won’t work.
Use it later, on a computer
Send yourself the link, or a reminder for tomorrow morning. Both are made on your phone and sent nowhere else.
Get all 10 tools in one go
One Good Citizens folder with every tool in it. Download the file, then bring it into your browser:
Download the bookmarks file- 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
More free tools: Fovea, Color vision, Aging eyes, or all 10.
Why this matters
Think of the slideshow that turns by itself at the top of so many business websites. It pulls the eye, which is what it was put there to do, and for some people it also brings on dizziness, nausea or a migraine.
This tool finds everything on a page that moves or plays by itself, checks whether your site listens when someone has asked their phone or computer for less motion, and pauses it all with one button. It never flashes or plays anything itself.
Who feels unwell when a page moves
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, problems with the balance organs of the inner ear, 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, including the customer who came to read your prices.
When a cartoon sent children to hospital
On December 16, 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.
Your customers can ask for less motion
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 like a technician who walks past the note on the door asking them to knock quietly: someone took the trouble to ask. Reduced motion does not have to mean none: swap a zoom or a slide for a gentle fade.
All the advice, in full
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.Swap, don’t only remove
For people who ask for less motion, replace zooms, spins and parallax with fades or instant changes.
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).
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.
Never flash
Nothing more than three flashes a second, and avoid saturated red flashing entirely (WCAG 2.3.1).
Keep motion away from reading
Animation beside text makes reading harder. Keep moving things out of the way of anything people need to read.
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.
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.
Where these numbers come from
Every figure on this page comes from one of these 12 sources. The small numbers in the text point here.
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