Website Accessibility Strategies for Motion Sensitivity - openbox9: strategy, branding, and design

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

We’d love to provide website solutions accessible to all your organization’s supporters. Contact us and tell us about your needs.

Karen Fletcher

Karen loves to create beautiful, evocative, delightful websites to tell a story through user experience.

September 20th, 2023 // 9news