Making Motion Inclusive

A presentation at An Event Apart Boston in in Boston, MA, USA by Val Head

2.3.1 Three flashes or below threshold

2.3.1 Three flashes or below threshold

2.3.3 Animation from interactions

2.3.3 Animation from interactions

How to meet this criteria?

How to meet this criteria?

Vestibular disorders defined:

Vestibular disorders defined:

Vestibular disorders defined:

Vestibular disorders defined:

Motion that potentially triggers

Motion that potentially triggers

Scaling and zooming

Scaling and zooming

Spinning and vortex effects

Spinning and vortex effects

Hey, about that parallax…

Hey, about that parallax…

Constant animation near text

Constant animation near text

Large movements

Large movements

Prefers-reduced-motion

Prefers-reduced-motion

An approximate timeline

An approximate timeline

You can opt in to reduced motion via OS settings on mac and iOS

You can opt in to reduced motion via OS settings on mac and iOS

And also on Windows

And also on Windows

Hey… Browsers?

Hey… Browsers?

Let’s clear the air about animation and inclusive design. It’s a common misconception that things like inclusive design and accessibility only come at the cost of design details like motion, but that’s just not the case. Whether it’s microinteractions, animated illustrations, or larger animated experiences, a little care and consideration can go a long way towards getting the best of both worlds. In this dynamic session, Val will show you how to build animated interactions with inclusivity in mind from the start. We’ll discuss how to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.

Buzz and feedback

Here’s what was said about this presentation on social media.