Making Motion Inclusive

A presentation at An Event Apart Denver in in Denver, CO, USA by Val Head

Inclusive Design?

Inclusive Design?

Modern thinking for modern times.

Modern thinking for modern times.

A diversity of ways to participate

A diversity of ways to participate

Animation ❤ UX

Animation ❤ UX

WCAG

WCAG

2.2.2 Pause, Stop, Hide

2.2.2 Pause, Stop, Hide

2.3.1 Three flashes or below threshold

2.3.1 Three flashes or below threshold

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

Vestibular disorders defined:

Vestibular disorders defined:

Vestibular disorders defined:

Vestibular disorders defined:

A mismatch

A mismatch

Motion that potentially triggers

Motion that potentially triggers

Scaling and zooming

Scaling and zooming

Spinning and vortex effects

Spinning and vortex effects

Multi-speed or multidirectional movement

Multi-speed or multidirectional movement

Hey, about that parallax…

Hey, about that parallax…

Constant animation near text

Constant animation near text

Large movements

Large movements

Not on the list…

Not on the list…

Prefers-reduced-motion

Prefers-reduced-motion

Browser support:

Browser support:

Respecting Reduced Motion

Respecting Reduced Motion

reduce != remove

reduce != remove

Instead, Reduce where needed

Instead, Reduce where needed

Projects with more extensive motion

Projects with more extensive motion

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.