SlideShare a Scribd company logo
1 of 57
Download to read offline
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
MediaQueriesLevel5Editor’sDra4
goo.gl/CcrVFs
EricBaileygoo.gl/W5mfYJ
SteveGardnergoo.gl/aMYk3H
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
www.microso4.com/en-us/design/
inclusive
(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 me!
Animation belongs to all of us now.
Let us set the web in motion together.
WebAnimationWeekly.com
slack.AnimationAtWork.com
@RachelNabors
.com
20%
off with 

AAW
-ADAS
courses.rachelnabors.com

More Related Content

Similar to Accessible UI Animation

Intro to Flash 8 welcome & course outline (2008)
Intro to Flash 8 welcome & course outline (2008)Intro to Flash 8 welcome & course outline (2008)
Intro to Flash 8 welcome & course outline (2008)
Matteo Wyllyamz
 
Why you should flikr for your images
Why you should flikr for your imagesWhy you should flikr for your images
Why you should flikr for your images
Geoffrey Lowe
 
The convergence of all things (wdu keynote)
The convergence of all things (wdu keynote)The convergence of all things (wdu keynote)
The convergence of all things (wdu keynote)
Chris Wilson
 
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Dylan Wilbanks
 

Similar to Accessible UI Animation (20)

Tales of Suckage and Awesomeness (Full Frontal 2012)
Tales of Suckage and Awesomeness (Full Frontal 2012)Tales of Suckage and Awesomeness (Full Frontal 2012)
Tales of Suckage and Awesomeness (Full Frontal 2012)
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
 
Animation in the classroom
Animation in the classroomAnimation in the classroom
Animation in the classroom
 
The velvet Rope -
The velvet Rope - The velvet Rope -
The velvet Rope -
 
Intro to Flash 8 welcome & course outline (2008)
Intro to Flash 8 welcome & course outline (2008)Intro to Flash 8 welcome & course outline (2008)
Intro to Flash 8 welcome & course outline (2008)
 
Deep Learning Cases: Text and Image Processing
Deep Learning Cases: Text and Image ProcessingDeep Learning Cases: Text and Image Processing
Deep Learning Cases: Text and Image Processing
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline World
 
Why you should flikr for your images
Why you should flikr for your imagesWhy you should flikr for your images
Why you should flikr for your images
 
Responsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPHResponsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPH
 
Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web development
 
Mad scientist-roadshow
Mad scientist-roadshowMad scientist-roadshow
Mad scientist-roadshow
 
TAPES.pptx
TAPES.pptxTAPES.pptx
TAPES.pptx
 
The convergence of all things (wdu keynote)
The convergence of all things (wdu keynote)The convergence of all things (wdu keynote)
The convergence of all things (wdu keynote)
 
Icouldcracboard
IcouldcracboardIcouldcracboard
Icouldcracboard
 
An Introduction to the Web Accessibility
An Introduction to the Web AccessibilityAn Introduction to the Web Accessibility
An Introduction to the Web Accessibility
 
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017
 
The Case of the Ouch! Demoing Inaccessible User Experiences to Bring Organiza...
The Case of the Ouch! Demoing Inaccessible User Experiences to Bring Organiza...The Case of the Ouch! Demoing Inaccessible User Experiences to Bring Organiza...
The Case of the Ouch! Demoing Inaccessible User Experiences to Bring Organiza...
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017
 
Query by Image (이미지로 이미지 검색하기)
Query by Image (이미지로 이미지 검색하기)Query by Image (이미지로 이미지 검색하기)
Query by Image (이미지로 이미지 검색하기)
 

More from Rachel Nabors

A Brief Introduction to Animation, UI and the Visual Cortex
A Brief Introduction to Animation, UI and the Visual CortexA Brief Introduction to Animation, UI and the Visual Cortex
A Brief Introduction to Animation, UI and the Visual Cortex
Rachel Nabors
 

More from Rachel Nabors (12)

Vue in Motion
Vue in MotionVue in Motion
Vue in Motion
 
The browser is not a document reader!
The browser is not a document reader!The browser is not a document reader!
The browser is not a document reader!
 
Design is not a bug ticket - All Things Open 2016 Keynote
Design is not a bug ticket - All Things Open 2016 KeynoteDesign is not a bug ticket - All Things Open 2016 Keynote
Design is not a bug ticket - All Things Open 2016 Keynote
 
Career Offroading
Career OffroadingCareer Offroading
Career Offroading
 
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web designThe Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
 
Alice in Web Animations API Land
Alice in Web Animations API LandAlice in Web Animations API Land
Alice in Web Animations API Land
 
A Brief Introduction to Animation, UI and the Visual Cortex
A Brief Introduction to Animation, UI and the Visual CortexA Brief Introduction to Animation, UI and the Visual Cortex
A Brief Introduction to Animation, UI and the Visual Cortex
 
State of the Animation
State of the AnimationState of the Animation
State of the Animation
 
Animating the User Experience
Animating the User ExperienceAnimating the User Experience
Animating the User Experience
 
Word Press Security Talk
Word Press Security TalkWord Press Security Talk
Word Press Security Talk
 
Wabi-sabi: the beauty of imperfection
Wabi-sabi: the beauty of imperfectionWabi-sabi: the beauty of imperfection
Wabi-sabi: the beauty of imperfection
 
Fizzled Durham 2010: Social Media and Pikachu
Fizzled Durham 2010: Social Media and PikachuFizzled Durham 2010: Social Media and Pikachu
Fizzled Durham 2010: Social Media and Pikachu
 

Recently uploaded

一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
cyebo
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
Jaime Brown
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
ajroy0196
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
JIT KUMAR GUPTA
 

Recently uploaded (20)

The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
spColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdfspColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdf
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 

Accessible UI Animation