Accommodating Vertigo and Vestibular Disorders

Environment

Accessibility

Issue

Some websites have content that might trigger negative responses, particularly for individuals who experience vertigo and other vestibular disorders. This article offers steps that both users and site developers could take to mitigate such issues.

Resolution

People with vestibular disorders experience issues with balance, spatial orientation, and motion sensitivity, often leading to dizziness, vertigo, nausea, or disorientation. These conditions can be triggered or worsened by certain types of visual stimuli, particularly on the web. Poor web design practices such as fast or continuous animations, autoplaying videos, and parallax scrolling (where background content moves at a different speed than foreground content to create a sense of depth) can cause physical discomfort or even prevent users from engaging with content altogether. Designing with vestibular accessibility in mind ensures a safer and more inclusive digital experience for users sensitive to motion.

User-Side Mitigation Techniques for Motion and Flash Sensitivity

  • Enable "Reduce Motion" on your device

    • Activates system-level settings to limit parallax, zoom, and other animations on supported websites and apps.

  • Use a browser extension or accessibility tool

    • Tools like the Chrome extensions Dark Reader or Stylus can block animations, invert colors, reduce brightness, or apply custom styles.

  • Disable image loading or block CSS animations

    • Some web browsers let you reduce or block visual effects like animations or moving images, which can help prevent dizziness or discomfort. For example, Firefox allows advanced users to create a special file that turns off certain animations, and Chrome has extensions that can help stop GIFs from playing automatically.

    • If you're using Firefox and want to learn how to turn off animations, you can look into something called a userContent.css file. This lets you add custom rules to reduce motion on websites.

  • Invert screen colors or enable high contrast mode

    • System-level settings on Windows, macOS, iOS, and Android can reduce visual strain by increasing contrast or inverting bright visuals.

  • Use Reader Mode (in browsers like Safari or Firefox)

    • Strips unnecessary layout effects and flashing content, showing only text and simple images in a calm format.

  • Zoom in to reduce visual field

    • By magnifying the page, you can limit peripheral movement and reduce the intensity of scrolling or background animations.

  • Adjust monitor or screen settings

    • Lowering brightness, enabling a blue light filter (Night Shift, Night Light), or reducing refresh rate can help with visual comfort.

  • Use ad blockers or script blockers

    • Tools like uBlock Origin can prevent intrusive pop-ups, autoplay videos, and flashing ad content.

Developer Guidelines: Relevant WCAG Criteria for Reducing Motion Sensitivity and Vertigo Triggers

  • WCAG 2.2.2 – Pause, Stop, Hide (Level A)
    Content that moves, blinks, or auto-updates must allow the user to pause, stop, or hide it. This helps reduce the risk of triggering vertigo through uncontrolled motion like carousels or auto-scrolling banners.

  • WCAG 2.3.1 – Three Flashes or Below Threshold (Level A)
    Web content must not flash more than three times in any one-second period, unless it is proven to fall below the general flash and red flash thresholds. This is essential for preventing seizures and mitigating vestibular triggers such as dizziness or disorientation.

  • WCAG 2.3.3 – Animation from Interactions (Level AAA)
    Motion animations that are triggered by user interaction must be able to be disabled, unless the animation is essential to the functionality or meaning of the content. This criterion directly supports users with vestibular disorders who may experience vertigo from unexpected motion.

  • WCAG 1.3.4 – Orientation (Level AA)
    Content must not restrict its view and operation to a single display orientation (such as landscape or portrait), unless a specific orientation is essential. Restrictive layouts or unexpected orientation shifts can contribute to motion-related discomfort.

  • Media Query: prefers-reduced-motion (best practice, supported by WCAG guidance)
    Respecting the user's system setting for reduced motion is strongly recommended. Developers can use the “prefers-reduced-motion: reduce” media query in CSS to suppress non-essential animations and transitions.

Sources

Additional Information

Need additional information or assistance? Contact the ITS Service Center.

Print Article