Safe Content: How to Prevent Seizures on Your Website

Certain types of content can trigger photosensitive seizures, dizziness, nausea, and animations or blinking elements can be distracting. This is especially critical for people with epilepsy, migraines, vestibular disorders, and ADHD.

1. Why should flashing and blinking content be avoided?

WCAG 2.3 (Seizures and Physical Reactions) states that content must not:

  • Flash or blink more than three times per second
  • Cover a large area of the screen
  • Have high contrast, especially red flashes

Examples of harmful content:

  • Blinking GIFs
  • Videos with rapid flashes
  • Flashing banners or ads

2. How to check if your content is safe?

Use the Photosensitive Epilepsy Analysis Tool (PEAT) to analyze whether animations or videos could cause seizures.

Other steps to ensure safety:

  • Reduce animation frequency
  • Implement the prefers-reduced-motion CSS media query
  • Provide a pause button for animations

3. How to properly implement animations on your website?

What to avoid?

  • Auto-playing animations for more than five seconds
  • Fast-moving elements without an option to pause
  • Large flashing content

Best practices:

  • Add a pause button for videos and animations
  • Use the prefers-reduced-motion CSS query
  • Limit animations to only those necessary

Example code (supporting prefers-reduced-motion):

1@media (prefers-reduced-motion: reduce) {
2  .animated {
3    animation: none;
4  }
5}


4. Frequently Asked Questions (FAQ)

Can animations be used on a website?

Yes, but they must:

  • Not blink more than three times per second
  • Have an option to pause or stop
  • Be slow and not too bright

Are there safe ways to use GIFs?

Yes, you can:

  • Use slow animations
  • Create smooth transitions instead of abrupt changes
  • Reduce contrast in animations

How do browsers help users with motion sensitivity?

Many browsers support the "Reduce Motion" setting:

  • On macOS: System Preferences → Accessibility → Display → Reduce Motion
  • On Windows: Settings → Ease of Access → Display → Show animations in Windows (OFF)

Key Takeaways

  • Avoid flashing content that blinks more than three times per second
  • Provide a pause option for animations
  • Use prefers-reduced-motion to adapt content for users
  • Check your content with PEAT Tool to ensure accessibility

Useful Resources

Sharing this information can help make websites safer and more accessible for everyone.