# Designing accessible animation

DevFeed: [Designing accessible animation](<https://devfeed.tech/articles/designing-accessible-animation-9380.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/design-accessible-animation/>)

Author: Kelly Gillit

Published: 2020-12-22T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [web animation](<https://devfeed.tech/topics/web-animation.md>), [Responsive Design](<https://devfeed.tech/topics/responsive-design.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [animation](<https://devfeed.tech/tags/animation.md>), [developers](<https://devfeed.tech/tags/developers.md>), [digital-products](<https://devfeed.tech/tags/digital-products.md>), [motion-design](<https://devfeed.tech/tags/motion-design.md>), [responsive-design](<https://devfeed.tech/tags/responsive-design.md>)

## AI overview

This article explains how to design accessible animation for digital products. It discusses motion-related risks, responsive animation, limiting duration and repetition, and giving users controls to pause, stop, or hide animations.

## Source excerpt

Animation is used in digital products in many ways, such as drawing a user's focus to a particular area on the screen, providing another layer to a brand's style with unique and ownable motion design, and adding a spark of unexpected fun to an otherwise robotic interaction. But designing animation that surprises and delights accessibly is trickier than it sounds. Dizziness, nausea, disorientation, migraines, and even seizures can all be caused by well-executed yet inaccessible motion design. Because of this, it is critical to design your animation with both aesthetics and accessibility in mind. Consider parallaxing--large-scale animation where the foreground and background slide past each other at different speeds--and primary navigation based on horizontal scrolling. These effects, especially when dramatic, can trigger the symptoms mentioned earlier. Animations inherently carry a lot of visual and cognitive weight, so always take into account how the user will be viewing it. Desktop screens are interacted with at a greater distance than handheld devices, therefore any animation should be responsive to avoid overwhelming or distracting users from anything essential. Users with cognitive and learning disabilities may especially appreciate this. Next, rein in the animations. Endlessly looping animations at any size can be more disorienting than delightful. Specifying the number of cycles it will play, limiting the duration that it plays, or having the animation paused by default will ensure its accessibility. Another way to handle this is by designing controllers that allow the user to pause, stop, or hide the animation altogether. While it's essential that accessible animation starts at the design level, there are additional ways developers can implement these tips behind the scenes. We've included some links to help show you how.