Neurological Disabilities

Neurological disabilities affecting web accessibility include conditions where visual stimuli — flashing content, motion, parallax effects, and rapid animation — can trigger serious physical reactions. For some users, a poorly designed website is not merely frustrating: it can cause a seizure, hours of vestibular symptoms, or a migraine that prevents them from working for the rest of the day.

This category also includes conditions like multiple sclerosis and Parkinson’s disease that combine motor and cognitive effects, and chronic pain conditions where extended screen use is itself the barrier.

Conditions and their web implications

Condition	Web triggers	Affected population
Photosensitive epilepsy	Flashing content between 3–50 Hz, certain geometric patterns	~3% of people with epilepsy; ~65,000 Canadians
Vestibular disorders	Parallax scrolling, auto-scrolling, zooming animations, motion	~35% of adults over 40 experience some vestibular dysfunction
Migraine with aura	Bright flashing, high-contrast patterns, visual noise	~15% of Canadians
Multiple sclerosis	Fatigue from bright screens; motor and cognitive barriers	~90,000 Canadians
Parkinson’s disease	Tremors affecting pointer control; cognitive load from complex UI	~100,000 Canadians
Post-concussion syndrome	Light sensitivity, concentration difficulties	Millions of Canadians at any given time
PTSD (with visual triggers)	Certain imagery, sudden audio/visual changes	Varies widely

Photosensitive epilepsy

What triggers a seizure

Not all flashing content is dangerous — the risk depends on:

Frequency: 3–50 Hz is the danger zone; 3 Hz is the most dangerous
Area: Large flashing areas (covering more than 10° of visual field at typical viewing distance, roughly 341×256px at arm’s length) are more dangerous than small ones
Contrast: High-contrast flashing (red/black, white/black) is more dangerous than low-contrast
Pattern: Certain geometric patterns (stripes, spirals, checkerboards) are triggers even without flashing

WCAG requirements

Criterion	Level	Requirement
2.3.1 Three Flashes or Below Threshold	A	Content does not flash more than 3 times/second, OR the flash is below general and red flash thresholds
2.3.2 Three Flashes	AAA	No content flashes more than 3 times/second — no exceptions

Vestibular disorders

Vestibular disorders affect the inner ear’s balance system. When the eyes perceive motion that the inner ear does not confirm, users can experience:

Dizziness and vertigo
Nausea
Disorientation and difficulty focusing
In severe cases: vomiting and inability to work for hours after

What triggers vestibular symptoms on the web

Effect	Risk level
Parallax scrolling (background scrolls at different rate than content)	High
Sticky elements that stay fixed while content scrolls beneath them	Moderate to high
Zoom/scale animations on scroll or load	High
Auto-scrolling carousels and sliders	High
Page transitions that slide, fade, or zoom	Moderate
Infinite scroll (content continuously loads)	Moderate
Large-area CSS animations	Moderate
Animated backgrounds	High

prefers-reduced-motion

The prefers-reduced-motion CSS media query reads the user’s operating system accessibility preference for reduced motion. This is the primary technical solution for vestibular accessibility.

Developer

/* Default: animation on */
.hero-banner {
  animation: fadeSlideIn 0.8s ease-out both;
}

/* Reduced motion: remove animation entirely */
@media (prefers-reduced-motion: reduce) {
  .hero-banner {
    animation: none;
  }
}

Best practice: write reduced-motion styles as your default and add motion only when the user has not requested reduction:

/* Motion-first approach (preferred) */
.card {
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
}

This ensures users who have the setting enabled (and users whose browsers do not support the media query) get the accessible version by default.

Barriers on the web

Parallax scrolling

Barrier: Background images or decorative elements scroll at a different speed from the main content — this visual motion disconnect is a common vestibular trigger that can cause dizziness and nausea within seconds.
Assistive Technology: None — the motion is the barrier
Design Consideration: Disable parallax entirely when prefers-reduced-motion is active. Consider whether parallax adds enough value to justify the risk — for many sites, static backgrounds serve the design goal equally well.

Animated carousels and auto-advancing slides

Barrier: Hero sections and content carousels that auto-advance without user control create continuous visual motion — a trigger for vestibular disorders, and a distraction for users with ADHD.
Assistive Technology: None
Design Consideration: Auto-advancing content must include a pause/stop mechanism (WCAG 2.2.2 Level A). Better practice: disable auto-advancement by default and only advance on explicit user interaction. A static feature section often performs better on conversion metrics as well.

Flashing loading indicators and animations

Barrier: Animated loading spinners, progress bars, and skeleton screens that flash or pulse may trigger photosensitive reactions if they exceed 3 Hz.
Assistive Technology: None
Design Consideration: Ensure loading animations operate well below 3 Hz. A smooth 1-second pulse animation (1 Hz) is safe. Rapidly blinking indicators are not. Respect prefers-reduced-motion and substitute a static indicator.

Page transition animations

Barrier: Full-page zoom, slide, or fade transitions during navigation can cause vestibular symptoms — especially when transitions affect large portions of the viewport.
Assistive Technology: None
Design Consideration: Page transitions should be disabled or reduced to a simple opacity fade when prefers-reduced-motion is active. Avoid transitions that move content across large distances or zoom in/out.

Sticky headers that shift during scroll

Barrier: Sticky navigation bars that shrink, show/hide, or animate as the user scrolls create continuous background motion while the user tries to read foreground content — a vestibular trigger.
Assistive Technology: None
Design Consideration: If you implement a sticky header that changes on scroll, ensure all transitions are suppressed under prefers-reduced-motion. Consider whether a simple static sticky header meets the design goal without motion.

Design considerations

Designer

Default to stillness

Design the base experience without animation. Add motion only where it provides clear functional value (e.g., a drawer opening to indicate content appearing from the side). Purely decorative animations should be the first to be removed under prefers-reduced-motion.

Safe motion

Not all motion is dangerous. Motion that is:

Small in area (a small spinner, a button hover effect)
Slow (a 0.3s transition at normal speed)
Non-vestibular (colour changes, opacity fades, outline changes)

…is far less likely to cause symptoms than motion that is large, fast, or spatial (parallax, zoom, position changes).

Avoid geometric patterns

Dense stripes, checkerboards, and spirals — even static ones — can trigger migraines and epileptic sensitivity in some users. Avoid high-contrast geometric background patterns in full-page or large-area applications.

Provide user controls

For content that inherently involves motion (interactive data visualizations, immersive interfaces), provide explicit controls to pause, reduce, or disable motion within the interface — not just relying on the OS-level preference.

Testing

Check your OS motion setting

Windows: Settings → Ease of Access → Display → “Show animations in Windows” (off)
macOS: System Settings → Accessibility → Display → “Reduce motion” (on)
iOS: Settings → Accessibility → Motion → “Reduce Motion” (on)
Android: Settings → Accessibility → “Remove animations” (on)

After enabling reduced motion, visit your site and confirm:

All CSS transitions are suppressed
No animations run in JavaScript
Carousels do not auto-advance
Parallax effects are disabled

DevTools simulation

In Chrome DevTools: Rendering tab → Emulate CSS media feature prefers-reduced-motion: reduce. This lets you test without changing your system settings.

Flashing check

For any video or animation:

Use PEAT (Photosensitive Epilepsy Analysis Tool) on video content
Manually count flashes — if anything flashes more than 3 times per second, it must be changed

Design Principles — motion safety in design systems
Development Practices — implementing prefers-reduced-motion in CSS and JavaScript
Testing and Evaluation — tools for checking animation safety