Accessible UI Animation

Accessible Animation Lessons from the Web with @RachelNabors

WebAnimationWeekly.com

slack.AnimationAtWork.com

accessible animation = no motion

accessible animation > no motion

Au#sm & Dyslexia

Looping Animation

A lot of au)s)c children are riveted by the mo)on of (fan) blades… Dyslexics who can see the blade flicker say it's horribly fa)guing and distrac)ng.

The mo)on is part of the aCrac)on, too. …I do get stuck on those geometric screen savers a lot of computers have.

Temple Grandin Animals in Translation

“

Seizures

Flashing Animation

devToolsChallenger.com

Guidelines for Avoiding Seizures

• No more than 3 flashes per second.

• The combined area of flashes occurring concurrently occupies no more than a total of one quarter of any 341 x 256 pixel rectangle anywhere on the displayed screen area when the content is viewed at 1024 by 768 pixels.

—The Trace Research & Development Center, a part of the College of Informa)on Studies at the University of Maryland trace.umd.edu/peat

Ves#bular Disorders

Motion

Let’s talk about that.

What’s a vestibular disorder?

Vestibular System

The sensory system that gives us our sense of balance and spa8al orienta8on via ears, eyes, and other inputs.

Triggers

goo.gl/oicPfZ

Scaling/Zooming

goo.gl/oicPfZ

goo.gl/oicPfZ

Spinning/Spiraling

goo.gl/oicPfZ

goo.gl/oicPfZ

Differing Speeds/Directions

goo.gl/oicPfZ

goo.gl/oicPfZ

3D motion in 2D

goo.gl/oicPfZ

goo.gl/oicPfZ

Peripheral Animation

goo.gl/oicPfZ

More on the WebKit blog goo.gl/oicPfZ

Triggers != Gestures

What the Web Is Doing

Med

ia Q

uerie

s Lev

el 5

Edi

tor’s

Dra

4 goo.gl/CcrVFs

Eric

Bai

ley goo.gl/W5mfYJ

Stev

e Ga

rdne

r goo.gl/aM

Yk3H

goo.gl/oicPfZ

More about reduced mo)on media queries and how to use them… goo.gl/SdC4LJ

Val Head

Giving Users a Choice

Op4on 1: Change Se:ngs

Accessibility Settings

Anima&on preferences:Full anima&on Reduce anima&on Disable anima&on

Op4on 2: Ask First

This site uses anima&on. How would you like to experience it?

Full anima&on Reduce anima&on Disable anima&on

devToolsChallenger.com

Op4on 3: Give No4ce

This site uses anima&on and mo&on. Disable it?

devToolsChallenger.com

The WCAG

WCAG

The W3C’s Web Content Accessibility Guidelines (WCAG) are the accessibility gold standard for the Web.

WCAG 1

1999’s stringent standards re: anima4on

• Provide alt text for animated GIFs.

• Synchronize your cap)ons/audio descrip)ons.

• “Ensure that moving, blinking, scrolling, or auto-upda)ng objects or pages may be paused or stopped.”

• A note about flashes and epilepsy (plz keep flashes below 20 per second, thanks).

WCAG 2

ww

w.m

icro

so4.

com

/en-

us/d

esig

n/in

clus

ive

(Lack of) Research Is a Real Problem

goo.gl/9FLM5m

goo.gl/9FLM5m

goo.gl/9FLM5m

Broad generaliza4ons/good guesses

• Anima)on should serve a purpose.

• Be consistent

• Downgrade to fades

• Use mo)on blur on fast, large moving elements

• An)cipate and signal oncoming anima)ons

• Reduce autoplay

• No one likes parallax anymore

Issues facing standardizing accessibility

• Extrapola)ng from unrelated research.

• Research from homogenous sources.

• Humans are inherently different.

It appears every user with Ves)bular disabili)es is unique and its hard to nail down a group of provoca)ve ac)ons that would significantly address a lot of the issues without significant impact on design.

“

David MacDonald Invited Expert at

the WCAG

You Can Help

Be a part of the solu4on!

• Share

• Report

• Research

Reach out to m

e!

Animation belongs to all of us now.

Let us set the web in motion together.

WebAnimationWeekly.com

slack.AnimationAtWork.com

@RachelNabors .c

om

20% off with

AAW-ADAS

courses.rachelnabors.com