Epilepsy is the fourth most common neurological disease. An estimated 1.2 percent (3.4 million) of the U.S. population have been diagnosed with the condition — which means that if your website has a sizable amount of traffic, there’s an excellent chance that some of your users have epilepsy.
Photosensitive seizures don’t affect every person with epilepsy, but they’re an extremely important concern for web accessibility.
You shouldn’t expect these users to change their browsing habits to avoid potential triggers. If your website includes flashing content, you should make that content accessible for as many people as possible, regardless of whether you provide text alternatives. As the World Wide Web Consortium (W3C) notes:
Individuals who have seizures when viewing flashing material will be able to view all of the material on a site without having a seizure and without having to miss the full experience of the content by being limited to text alternatives. This includes people with photosensitive epilepsy as well as other photosensitive seizure disorders.
The W3C addresses this issue in the Web Content Accessibility Guidelines (WCAG) Success Criterion 2.3.1, “Three Flashes or Below Threshold.” It’s a fairly straightforward requirement: Web pages must not contain anything that flashes more than three times in any one-second period, or the flash must be below the general flash and red-flash thresholds.
Below, we’ll discuss this criterion in detail and provide tips for testing your content.
Wherever possible, avoid flashing content
Of course, the simplest way to meet WCAG’s requirements is to avoid flashing content. That may be a good idea from a general user experience perspective — flashing content can be distracting, particularly for people with attention disorders, and it’s usually not necessary for getting your point across.
However, there are defensible reasons to use flashing content. If that’s the case, keep the content small.
WCAG requires that “the combined area of flashes occurring concurrently occupies no more than a total of .006 steradians within any 10 degree visual field on the screen (25% of any 10 degree visual field on the screen) at typical viewing distance.”
For reference, on a 1024 x 768 screen, a 341 x 256 pixel block would represent a 10-degree viewport. These requirements are based on existing standards for television broadcasts.
Related: 4 Quick Ways to Check Web Animations for Accessibility
Consider users with photosensitivity when building your content
Most websites can meet WCAG’s requirements without making significant changes, but you’ll need to think carefully if your website must include flashing content. Here, it’s helpful to consider a few examples:
- You’re building a web game with flashing squares. The squares take up a small portion of the screen, and you avoid using red flashes, which have a higher chance of triggering photosensitive users.
- You have a web animation that flashes. You adjust the animation so that the change in luminance (brightness) is less than 10% of the maximum luminance.
- You have a web animation that flashes. You adjust the flash frequency to occur two times per second, which meets WCAG’s requirements.
WCAG’s requirements for flashing content are quite strict, with no exceptions for “essential" functionality — so to build an accessible website, you must follow this criterion. It’s applicable to any content under your control (including videos and other multimedia, regardless of whether you created the visual content).
To test specific content for triggers, you can use tools like Photosensitive Epilepsy Analysis Tool (PEAT).
Related: Myths and Facts about Photosensitivity and Seizures
Limit the use of animated GIFs and auto-playing videos
Animated GIFs and videos that play automatically may provoke seizures when they are not expected. Per WCAG 2.2.2, if the page content contains parts that move, blink or scroll automatically for more than 5 seconds, you’ll need to provide a way to turn off the movement or blinking or scrolling, or to hide it.
As we’ve discussed on this blog, the drawbacks of autoplay far outweigh the benefits. Most users find autoplay annoying or distracting. Autoplay also creates especially frustrating issues for people with certain disabilities:
- Autoplay can interfere with screen readers, making it difficult for users who rely on text-to-speech software to comprehend the material.
- Autoplay content could inadvertently trigger seizures in users.
- Autoplay can be extremely frustrating for users with cognitive disabilities.
As for videos, it's better to feature a static thumbnail and let users choose to play the video themselves rather than having it autoplay. If it must autoplay, users should be able to easily pause or stop it.
Related: Are Embedded YouTube Videos Bad for Accessibility?
Consider additional techniques to improve accessibility
While not strictly required for conformance, these suggestions should be reviewed and implemented as much as possible to make content more accessible:
- Reducing contrast for any flashing content.
- Avoiding fully saturated reds for any flashing content.
- Reducing the number of flashes, even if they do not violate thresholds.
- Providing a mechanism to suppress any flashing content before it begins.
- Slowing down live material to avoid rapid flashes (as in flashbulbs).
- Freezing the image momentarily if 3 flashes within one second are detected.
- Allowing users to set a custom flash rate limit.
Incorporating these suggestions can significantly improve the user experience — and very rarely diminishes the quality or impact of content being presented. An accessible, inclusive website benefits everyone and keeps your audience coming back.
For additional guidance with multimedia content, download our free one-page Video Accessibility Checklist. To test your website against WCAG, get started with our free automated web accessibility analysis.
