Animation

Animation and accessibility are often seen as two separate powers at odds with one another. How is it possible to strike a balance between elements that move and the possible negative effects they expose to users who are sensitive to motion? Oriana García explains how her team at Mercado Libre tackled the challenge by creating guiding principles for applying animation to user interfaces and incorporating them into the team’s design system.

Movement and animations aren't always fun, especially if they trigger symptoms like dizziness or nausea. Here are the slides for a talk I gave about how to make the web more inclusive for us, who suffer from these symptoms.

It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic things we can do to

The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it uses. This is for users who either require or prefer minimized animations; for example people with vestibular disorders often desire animations to be kept to a minimum.

Animated interfaces can cause headaches, nausea, dizziness, and other health problems for many people. The most affected groups are people with vestibular disorders, epilepsy, and migraine...

Here's a simple example: we want to animate a container open and closed, perhaps as part of an expand/collapse treatment. .acc-demo-1 { height:40px; padding:10px; overflow:hidden; transition:0.5s all; } .acc-demo-1.hidden { height:0px; padding:0px …

Our Best Practice of the Week (BPOW) looks at an often unknown area of accessibility: animations that have an adverse effect on a variety of people. Recent updates to CSS and JavaScript have made it really easy to implement fun, engaging animations on a web page. Be it CSS transitions or keyframes, or the latest jQuery SVG animation framework, one thing to keep in mind is your animation may make the user uncomfortable.