You're GIFing me a headache!
Whether instructional, informative, humorous, or strangely mesmerising, animated GIFs or repetitive motion clips are a common sight across apps and the web.
But no one wants to be inducing headaches, anxiety, or seizures in their users, making consideration of accessibility important.
Content that is constantly moving has an impact on usability for a range of users. It may overstimulate and be so distracting they can’t achieve the task they set out to accomplish . It may be too fast for them to completely understand, even after the fifth repeat. Or, if not properly produced, it may induce severe headaches or seizures in users with photo-sensitivity and/or epilepsy (officially known as photosensitive epilepsy, PSE or reflex epilepsy).
The television broadcasting and film industries are well aware of the potential for seizure causing strobe effects and have had guidelines in place for some time. In the digital world and with the advent of video streaming, vlogging, and the 300 hours of content uploaded to YouTube every minute, most content creators are unlikely to be aware of the potential issues.
There are some guidelines for accessibility on this front through Web Content Accessibility Guidelines (WCAG). They’re covered under two categories: “perceivable” allowing people to absorb content without extraneous distractions, and “photo-sensitivity” where flashing can cause seizures.
In perceivable, for any moving, blinking or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, there must be a mechanism for the user to pause, stop, or hide it. There is a caveat for movement, blinking, or scrolling that is part of an activity where it is essential… but considering why that’s the case in the first place would seem like good design practice.
For photo-sensitivity, the guidelines come from the TV broadcasting side of life. To ensure content limits the chance of known causes of seizures, content should not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. (That’s anything greater than 10% difference in luminosity, and/or with high red saturation).
Slowing down content, reducing the contrast, and avoiding saturated reds are key things to avoid. The size of the area flashing also has an impact, so reducing that where possible is also a mitigation strategy.
Having more than one way to access such information, GIFs, text, static images, or audio instructions will help as many users as possible independently self-serve. Entertainment is one thing, but instructional content like demonstrating how to use your app, or how to use your product, is content you definitely want people to be able to understand and absorb.
The important bits:
- Ensure that moving, blinking, or scrolling content can be stopped, paused, or hidden
- Ensure that there are no more than three flashes per second in content
- Reduce contrast, luminosity variation, and red saturation of content