An accessible website includes more people in your community, which is good for humans and good for business. Accessible design and technical solutions create inclusive website experiences to ensure users aren’t left behind, no matter how they engage with your site.
Disabilities can be
- Permanent – such as amputation, blindness, deafness, or cognitive
- Temporary – such as a broken bone, being in direct sunlight, or pregnancy
- Situational – such as having your hands full, driving, or being in a large crowd
- Or a combination, with compounding effects
Openbox9 pursues love of design and love of neighbor and are continually learning and improving.
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 Explained
Some users of your website specifically experience motion sensitivity (vertigo, epilepsy), or for whom motion triggers dizziness or nausea (whether permanently or situationally such as 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 collapsing navigation bars, carousels that automatically advance, 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 can also occur when unexpected or opposing movement occurs on screen in response to a user’s interaction. For example, when a user’s vertical scroll motion corresponds to horizontal scroll on screen.
How to Design for Motion Sensitivity
Prioritize accessibility from the start and 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 or left out with this decision?
Just like planting trees, the best time to design for motion accessibility was yesterday. 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 openbox9 site since launching the redesign in early 2023. For instance, users who have toggled their system settings to “prefers reduced motion” will see the collapsing navigation menu as always open instead of animated.
Don’t throw out baby with the bath water
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 grow your audience. 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
We’d love to provide website solutions accessible to all your organization’s supporters. Contact us and tell us about your needs.
