How can you use animations on mobile devices while maintaining accessibility?

1 Why accessibility matters

Accessibility is the practice of designing and developing products that are usable by everyone, regardless of their abilities, disabilities, or situational limitations. Accessibility is not only a legal requirement in many countries, but also a moral and ethical responsibility for designers and developers. Accessible animations can enhance the user experience, convey information, and create emotional connections, but they can also cause problems for users with visual, cognitive, or motion impairments, or users who prefer reduced motion settings.

2 How to test your animations

Before you implement your animations, it's important to test them for accessibility issues and potential pitfalls. You can use various tools and methods to do this, such as a screen reader to check how your animations are announced and perceived by those who rely on auditory feedback, a color contrast checker to ensure the animation has sufficient contrast with the background and other elements, a simulator or real device to check how your animations perform on different screen sizes, orientations, and resolutions, the accessibility settings on your device to adjust the font size, zoom level, and motion settings to see how your animations adapt and respond, and user testing and feedback to identify any usability or accessibility problems for different user groups.

3 How to follow accessibility guidelines

When creating animations for mobile devices, it is important to follow several accessibility guidelines and standards, such as the Web Content Accessibility Guidelines (WCAG), the iOS Human Interface Guidelines, the Android Material Design Guidelines, and the Reduced Motion Media Query. The WCAG gives principles, criteria, and techniques for making web content accessible, while the other two guidelines provide specific recommendations and examples for creating accessible animations. The Reduced Motion Media Query is a CSS feature that can detect if a user has requested reduced motion on their device and adjust animations accordingly.

4 How to use animation principles

Animation principles are the basic rules and concepts that guide the creation of effective and engaging animations. Applying them to your mobile design can help you improve the quality, consistency, and clarity of your animations, as well as their accessibility. To create a natural and smooth motion, your animations should start and end slowly, while accelerating and decelerating in between. Anticipation is also important, as it allows you to give a hint or a cue of what is about to happen, avoiding surprises or confusion. Feedback should be provided in response or confirmation of the user's actions or the system's status, enhancing the user's sense of control and understanding. Finally, your animations should be as short and as fast as possible without compromising quality or meaning, avoiding delays or distractions.

5 How to avoid common pitfalls

Even if you follow the accessibility guidelines and the animation principles, you might still encounter some common pitfalls that can affect the accessibility of your animations. For instance, using animations that are too flashy, bright, or frequent can cause seizures, headaches, or nausea for users with photosensitive epilepsy or vestibular disorders. Animations that are too subtle, complex, or ambiguous can confuse, frustrate, or mislead users with low vision, color blindness, or cognitive impairments. Additionally, animations that are too dependent on visual cues can exclude or disadvantage users who use screen readers, voice control, or alternative input methods. Finally, animations that are too inconsistent, irrelevant, or intrusive can annoy, distract, or overwhelm users who prefer reduced motion, minimalism, or simplicity.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?