Web Accessibility for Vestibular Disabilities
Stick with the verti-NO.
The vestibule is the central part of your inner ear that aids your mind with bodily balance, equilibrium, and deciphering your orientation among your surroundings. In short, the vestibule like your brain’s little ABS beam.
When your brain’s ABS beam stops calculating balance and equilibrium correctly, you may have a hard time performing daily tasks, such as walking, using a computer, reading, exercising, or even standing upright. Some people’s ABS beams are perpetually broken and they live state of imbalance-ness for nearly all their lives. Others experience vestibular dysfunctions temporarily, whether it’s caused by an injury, medication, lifestyle change, or exposure to specific stimuli or triggers (such as a website that uses parallaxes out the wazoo).
Facundo Corradini, a front-end developer who once had a calcium crystal in his ear throw him into vestibular disarray:
“. . . Started to feel extremely dizzy, with a constant sensation of falling or spinning to the right. I was suffering from a bad case of vertigo caused by labyrinthitis that made it impossible to get anything done. . . If you’ve ever felt seasick, it’s quite a similar vibe. If not, think about that feeling when you just get off a rollercoaster. . .it’s like that, only all day long.” (Facundo Corradini)
Facundo’s temporary vestibular dysfunction restricted them from working, going outside, and even standing for long periods of time. Imagine what it must be like trying to perform mundane tasks online in this state, such as scheduling a doctor’s appointment.
Due to the difficulty of properly diagnosing vestibular disorders (VPDs), the statistics on how many people truly have a vestibular disorder (or have experienced various forms of vestibular dysfunction) are difficult to calculate. The National Institute on Deafness and Other Communication Disorders (NIDCD) states, however, that 4% of American adults have reported a chronic problem with balance, while an additional 1.1% reported a chronic problem with dizziness.
The symptoms of vestibular disorders can be wildly unexpected, variant, and debilitating if triggered. The internet can be a risky place for people with vestibular dysfunctions or disabilities, where all it takes is one looping GIF to throw their sense of balance and reality into disarray.
Many common UI practices, such as parallaxes and bold delight animations, are triggering and harmful to people who experience vestibular dysfunction. As designers, it’s crucial we recognize the prevalence of vestibular inaccessibility in many modern UI designs and discover solutions for how we can make the web more accommodating for people experiencing temporary or sustained vestibular disabilities.
Remember the parallax craze?
From the early days of skeuomorphism to the more modern uses of neumorphism and 3D graphics, there’s consistently been a push within the UI industry to achieve a level of a false sense of depth within technological products.
When Apple first came out with the parallax background on iOS 7, there was an overwhelming amount of requests to limit (or remove) the parallax effect from the background. This three-dimensional effect applied to a two-dimensional surface left many Apple users with migraines, seasickness, and vertigo.
By creating technological products that suggest some form of false depth, we’re at risk of creating an adverse and possibly hostile experience for the user. If the user doesn’t expect to navigate a 3D experience through a 2D interface, the vestibular (even in people with healthy vestibular function) will detect a dissonance between expectation and reality and the user may feel the onset of motion sickness, dizziness, nausea, and headaches as a result of that dissonance.
After the backlash against the iOS update, Greg Sterling, a market analyst, told USA Today that the online comments were overreactive, while others took to Twitter to tell people who complained about the new update to “stop complaining, or otherwise fix the problem [themselves].” The overall education and societal knowledge about vestibular disabilities are quite minimal, especially compared to visual, auditory, physical, or other cognitive disabilities. In tech, vestibular disabilities aren’t prioritized as an accessibility issue, which further perpetuates this cycle of inaccessibility, anger, frustration, confusion, and ignorance within our user audiences.
Now, discussions about accessibility for vestibular disorders attack some very core aspects of UX and UI design: using motion to indicate change or importance, using drop-shadows to depict hierarchy, looping animations for user delight and branding, and applying parallaxes to simulate depth. While renouncing all of these design practices may seem like overkill, it’s important to recognize the severity of a person’s symptoms if their vestibular disability is triggered. A migraine caused by bold-colored blobs bouncing across the screen may leave someone in bed for days, even weeks. An app entirely built out of floating cards could make someone feel faint and distract them from the important tasks they’re trying to complete.
A badly-implemented parallax effect may even have some of your users downing Dramamine just to make it past the lock screen.
Accessibility shouldn’t be disregarded for attempts in ‘keeping up with the Jones’,’ in making your UIs look as trendy and sophisticated as your competitors. Your accessibility stints shouldn’t end at color contrast or text personalization.
So, in order to lead the industry in achieving true web accessibility for all, leave the parallax phase behind you and discover other, more accessible formats of user delight and accommodation.
Designing for vestibular disabilities
Here are some basic UI regimens that will accommodate users experiencing vestibular disabilities and dysfunctions:
Remove Automatic Motion
Animations or any form of motion (including videos) should not start automatically. Let the user’s direct actions trigger an animation or motion sequence. The user should manually trigger transitions through carousels or slides, rather than having them play automatically. This concept also applies to pop-ups, modals, and overlays.
Follow the User’s Device Preferences
Allow the user to turn off animations or motions within your settings page and/or default to using the user’s set device preferences. When possible, use the CSS preferred-reduced-motion media query so you can integrate conditional CSS animations and transitions based on the user’s set browser or OS preferences.
img {
animation: slidein 3s;
}
@keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
button {
transition: transform 1s;
}
button:focus,
button:hover {
transform: rotate(360deg);
}
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-duration: 0.001s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001s !important;
}
}/* Extracted from "A primer to vestibular disorders" by the A11Y PROJECT*/
Use Motion Sparingly
Be certain that any motion design applied to an interface is meant to properly “reinforce hierarchy, strengthen core communication, and reduce cognitive load for the user.” Delightful motion (or delight animations, commonly used to reinforce branding personality or awarding a user’s interaction) should be used sparingly and only for minimal strategic purposes.
Keep Animation Sizes Small
Any motion or animation, to the best of your ability, should be kept within less than 1/3 of the user’s viewport. Large, full-viewport motions can disorient and confuse the user.
Remove Looping Animations
Specify a CSS animation-iteration-count property on animation loops so that the animation stops after a set amount of iterations. If the animation is absolutely required to play on a loop, provide the user with a way to pause or stop the loop whenever needed.
If your product uses GIFs, it may be better to switch them out for embedded HTML videos or use the Giffer JavaScript library to prevent the auto-playing of GIFs.
You spin my head right ‘round. . .
Keep in mind that accessibility is essential for some, but useful for all. Users can experience ‘temporary’ disabilities, where even though they might not have a lifelong or sustained disability, they may be within a context which limits their attention span, vestibular sound-ness, or physical abilities. For example, when someone is using a mobile map phone while driving, the last thing the user needs is to experience the onset of a headache because of an untimely or unexpected map repositioning.
The societal ignorance, lack of knowledge, and silence of vestibular dysfunctions and disorders should not sway you from making sure your product can be used by people with vestibular disabilities. If anything, let your attempts at wholly-inclusive accessibility lead the industry in finding new ways to make technology truly accessible for all.
