Before we tackle that question, let’s step back in time 20 years. Late on a December afternoon in 1997, thousands of Japanese children simultaneously collapsed into seizures across the nation – 685 were hospitalized, some for more than two weeks.
It was later determined that they had all fallen watching exactly the same scene in a new episode of Pokemon. In episode #38, ‘Electric Soldier Porygo’, Pikachu uses his lightning attack to destroy incoming missiles. It turns out that the animators had used a fast red and blue strobe effect to create the lightning which had unwittingly induced photosensitive epileptic seizures in a substantial number of viewers.
Of course, this was a complete accident and a huge shock for Pokemon’s creators. In fact, the anime studio took a 4-month hiatus to investigate the incident and steps were taken to avoid all high contrast strobing animations in future.
But not all animators set out with such benign intentions.
Animating with Intent to Injure
Last friday, a Maryland man, John Rayne Rivello, was indicted to stand trial for attempted murder with an animated GIF.
In December last year, Rivello had taken extreme exception to writings of a Newsweek journalist Kurt Eichenwald and decided to take action. Aware of Eichenwald’s photosensitive epilepsy, Rivello created a large, flickering animated GIF with the words ‘You deserve a seizure for your post’ across the bottom. A short time later, Eichenwald’s wife found the writer collapsed and called 911.
The FBI charged Rivello with ‘criminal cyberstalking with the intent to kill or cause bodily harm’. Eichenwald’s lawyer argues that in this situation, tweeting this carefully crafted GIF directly to his client was no different to mailing an explosive device or a poison.
Rivello faces up to 10 years jail.
So, could designers accidently trigger seizures?
The good news is, probably not – it’s relatively difficult to accidentally trigger a seizure in vulnerable users. According to Webaim.org, problematic content would need to continuously flicker between 5 and 30 times per second. While we might create a flickering UI element, it’s less likely that it will continually animate.
The flicker source also needs to be large – few animated spinners and loading graphics are going to be big enough to cause problems. In practice, movies, TV, entertainment lighting, video games and even pinball machines typically present more problems than the web does.
Arguably, the single biggest risk for unwary designers are static graphics with special qualities. High contrast optical illusions – like the small section of image I’ve included above – can present serious issues when used in large panels and backgrounds. Although the image isn’t animated, it appears to move.
Though it’s unlikely, this is a scenario that could occur quite unintentionally and should certainly be considered when creating patterned backgrounds.
Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 40+ of SitePoint's book covers.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers