Improving the accessibility of your website includes more people in your community, which is good for humans and good for business. Accessible design solutions create inclusive experiences to ensure users aren’t left behind, no matter how they access your site.
Defining Disability
Disabilities can be: permanent (such as amputation, blindness, deafness, or cognitive), temporary (such as a broken bone, being in bright sunlight, or pregnancy), or situational (such as having one’s hands full, driving, or being in a large crowd). Or a combination, with compounding effects.
Disability happens at the points of interaction between a person and society. Physical, cognitive, and social exclusion is the result of mismatched interactions.
Microsoft Inclusive Design principles
Motion Sensitivity
Some users of your website specifically experience motion sensitivity (vertigo, epilepsy), or for whom motion triggers dizziness or nausea (whether permanently or situationally, from morning sickness to ear infections)
Motion can even just distract by not allowing users to fully read and absorb the information on the page and make informed decisions. How often do video ads autoplay and pull your attention away from the article you’re trying to read? Annoyed users leave quickly and do not come back.
Interaction and Expectation Mismatch
The most common features that cause mismatched interactions for users with motion sensitivity are things like a collapsing navigation bars, carousels that advance automatically, background videos that autoplay, and parallax effects (elements that fade in / out). Size matters too – an animation may be fine on desktop but difficult to see or interact with on mobile.
Disorientation occurs when a user’s physical movement triggers unexpected or opposing movement on screen. For example, when vertical scrolling unexpectedly switches to horizontal scrolling.
What can we do?
Design with motion accessibility in mind from the start. By prioritizing accessibility from the beginning, you’ll make every visitor to your site feel welcome and included from the jump. In early ideation, brainstorming, and design phases, ask questions like:
- Can the animation easily be adjusted to use a non-motion effect like an opacity fade or a crossfade?
- Would pausing the motion or removing the effect entirely preserve the meaning of the content?
- Is anyone being left behind with this decision?
Just like planting trees, the best time to design for motion accessibility is as early as possible. The next best time is today. Your website can and should be constantly improving, and making a website better is an iterative process. “Launch is not the end. It’s the beginning of a new phase, where features and enhancements continue to be released.”
We’ve improved accessibility on our own new openbox9 site post-launch. Users who have toggled their system settings to “prefers reduced motion” will see the collapsing navigation menu as always open instead of animated.
We don’t need to axe animation altogether
Some animations with non-moving properties like opacity, color, and blur are unlikely to cause problems for users. Consider implementing these as the default and saving more elaborate animations for areas where the user can control the active state.
All are Welcome, by Design
Designing for inclusivity will lead to a wider audience of users that feel valued and included. Improving your site’s accessibility is an opportunity to empathize with all visitors. At the end of the day, it’s just about being kind to your users.
Sources and Further Reading
- Your Interactive Makes Me Sick
- Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective
- Designing With Reduced Motion For Motion Sensitivities
- Designing Safer Web Animation For Motion Sensitivity
- Accessible motion: why it’s essential and how to do it right
- Understanding Animation from Interactions
- Microsoft Inclusive Design
- Apple’s airpod site with reduced motion settings
