Accessible Animation - Designing in the Browser
Channel: Chrome for Developers
Date: 28/09/2020

Welcome to Designing in the Browser with our host, Una Kravets. Interactive touches can be great for user understanding in a digital environment, but they can also leave some of your users disoriented and frustrated, the opposite of the intended effect.

So let’s talk about how we can avoid that, and how we can be sure to include our cute animated SVGs and button hovers while also ensuring that users who might get a bit nauseous when seeing a lot of animation in front of them, can also enjoy your site. We’ll be demonstrating how to use the “prefers-reduced-motion” media query to progressively enhance animation into your website, as well as show you how to build a simple “reduce animation” switch.

Links:
Media Queries 5 → https://goo.gle/2RVQxLw 
Base Card Flip Demo → https://goo.gle/3mSd1vf 
Preference Reduced Motion Demo →https://goo.gle/2G9hgl8 
Reduce Motion Checkbox Demo →  https://goo.gle/306S1XM  


Designing in the Browser → https://goo.gle/2NeLxjI 
Subscribe to Chrome Developers → https://goo.gle/ChromeDevs