Vestibular disorders

Vestibular disorders are a class of disability in which the sensory mechanism in the inner ear that detects movement of the head and helps to control balance isn't working as planned. Similar to being intoxicated, a person with a vestibular disorder has trouble keeping their balance (even sitting down) things appear to be moving which aren't, their feet don't feel stable, and senses are moving faster or slower than the body. Walking becomes challenging and people with these disorders have a constant risk of falling. It's difficult to concentrate or be productive.

The list of vestibular disorders is long. Some vestibular disorders are temporary, others are permanent. Some are caused by illness or injury, others by a genetic anomaly. As many as 35% of adults 40 or older in the US have experienced some sort of vestibular disorder. Approximately 8 million American adults report a chronic problem with balance, and an additional 2.4 million report a chronic problem with dizziness.

People who have visually-triggered vestibular disorders often notice that large-scale motion on the screen can cause them dizziness, nausea, headaches, or vomiting.

When we build for these barriers we need to provide:

• Clear expectations and meaningful context around what movement might happen on the site when a user takes action.
• Control for the users, including the ability to disable any animation or movement.
• An emphasis on animating non-moving properties (opacity, color, blur) over moving ones.
• A purpose for the animation - don't make things move unless there's a design-focused reason for them to move.
• Awareness that as time moves forward, browsers may provide automatic reduction or disabling of animation.

We need to avoid:

• Animation, sliders, or rapid movement that start automatically.
• Large areas of motion and parallax-like effects of background and foreground moving at different speeds
• Scrolljacking (where the backgrounds animate in at a speed unrelated to your scrolling speed)

Three factors that play a role

Three factors that play a role in people with vestibular disorders experiencing discomfort due to animation are the relative size of the movement, the direction of the movement, and the perceived distance an animated object covers

• Size: the physical size of the screen matters less than the size of the motion relative to the screen space available. A small button with 3D rotation is probably fine. A full-screen wipe transition covering the entire screen is probably a problem. Animating non-moving properties are generally ok.
• Direction: Moving a background at a different speed than the foreground (aka parallax) is very problematic. Animation that moves at a direction different from what the user is scrolling, or in a way that's not linked to the user's scroll speed can also cause problems.
• Distance: The farther an animation travels, the better chance it will be triggering.

Additional Resources

• A Primer to Vestibular Disorders by The A11Y Project
• Designing Safer Web Animation for Motion Sensitivity by Val Head at A List Apart
• Why iOS 7 is making some users sick by Craig Grannell at  The Guardian