{"id":281,"date":"2023-11-10T09:00:00","date_gmt":"2023-11-10T10:00:00","guid":{"rendered":"http:\/\/suimy.me\/?p=281"},"modified":"2024-05-01T17:01:43","modified_gmt":"2024-05-01T17:01:43","slug":"creating-accessible-ui-animations","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2023\/11\/10\/creating-accessible-ui-animations\/","title":{"rendered":"Creating Accessible UI Animations"},"content":{"rendered":"<p>              <title>Creating Accessible UI Animations<\/title><\/p>\n<article>\n<header>\n<h1>Creating Accessible UI Animations<\/h1>\n<address>Oriana Garc\u00eda<\/address>\n<p>                  2023-11-10T10:00:00+00:00<br \/>\n                  2024-05-01T16:05:07+00:00<br \/>\n                <\/header>\n<p>Ever since I started practicing user interface design, I\u2019ve always believed that animations are an added bonus for enhancing user experiences. After all, who hasn\u2019t been captivated by interfaces created for state-of-the-art devices with their impressive effects, flips, parallax, glitter, and the like? It truly creates an enjoyable and immersive experience, don\u2019t you think?<\/p>\n<p><a href=\"https:\/\/mercadolibre.com\/\">Mercado Libre<\/a> is the leading e-commerce and fintech platform in Latin America, and we leverage animations to guide users through our products and provide real-time feedback. Plus, the animations add a touch of fun by creating an engaging interface that invites users to interact with our products.<\/p>\n<p>Well-applied and controlled animations are capable of reducing cognitive load and delivering information progressively \u2014 even for complex flows that can sometimes become tedious \u2014 thereby improving the overall user experience. Yet, when we talk about caring for creating value for our users, are we truly considering <em>all<\/em> of them?<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/16-illustration-accessible-ui-animations.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"400\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Illustration of accessible UI animations\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/16-illustration-accessible-ui-animations.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/16-illustration-accessible-ui-animations.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>After delving deeper into the topic of animations and seeking guidance from our Digital Accessibility team, my team and I have come to realize that animations may not always be a pleasant experience for everyone. For many, animations can generate uncomfortable experiences, especially when used excessively. For certain other individuals, including those with attention disorders, animations can pose an additional challenge by hindering their ability to focus on the content. Furthermore, for those afflicted by more severe conditions, such as those related to balance, any form of motion can trigger physical discomfort manifested as nausea, dizziness, and headaches.<\/p>\n<p>These reactions, known as <a href=\"https:\/\/vestibular.org\/article\/diagnosis-treatment\/types-of-vestibular-disorders\/\">vestibular disorders<\/a>, are a result of damage, injury, or illnesses in the inner ear, which is responsible for processing all sensory information related to balance control and eye movements.<\/p>\n<p>In more extreme cases, individuals with photosensitive epilepsy may experience seizures in response to certain types of visual stimuli. If you\u2019d like to learn more about motion sensitivity, the following links are a nice place to start:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/alistapart.com\/article\/designing-safer-web-animation-for-motion-sensitivity\/\">Designing Safer Web Animation For Motion Sensitivity<\/a>,\u201d Val Head<\/li>\n<li>\u201c<a href=\"https:\/\/alistapart.com\/article\/accessibility-for-vestibular\/\">Accessibility for Vestibular Disorders<\/a>,\u201d Facundo Corradini<\/li>\n<li>\u201c<a href=\"https:\/\/www.nngroup.com\/articles\/animation-usability\/\">Animation for Attention and Comprehension<\/a>,\u201d Aurora Harley<\/li>\n<li><a href=\"https:\/\/web.dev\/learn\/accessibility\/motion\/\">Animation and motion<\/a> (web.dev)<\/li>\n<\/ul>\n<p>How is it possible to strike a balance between motion sensitivities and our goal of using animation to enhance the user interface? That is what our team wanted to figure out, and I thought I\u2019d share how we approached the challenge. So, in this article, we will explore <em>how<\/em> my team tackles UI animations that are inclusive and considerate of all users.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Roll up your sleeves and <strong>boost your UX skills<\/strong>! Meet <strong><a data-instant href=\"https:\/\/smart-interface-design-patterns.com\/\">Smart Interface Design Patterns<\/a><\/strong>\u00a0\ud83c\udf63, a 10h video library by Vitaly Friedman. <strong>100s of real-life examples<\/strong> and live UX training. <a href=\"https:\/\/www.youtube.com\/watch?v=3mwZztmGgbE\">Free preview<\/a>.<\/p>\n<p><a data-instant href=\"https:\/\/smart-interface-design-patterns.com\/\" class=\"btn btn--green btn--large\">Jump to table of contents\u00a0\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"https:\/\/smart-interface-design-patterns.com\/\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"690\" height=\"790\" data-src=\"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8c98e7f9-8e62-4c43-b833-fc6bf9fea0a9\/video-course-smart-interface-design-patterns-vitaly-friedman.jpg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"we-started-with-research-and-analysis\">We Started With Research And Analysis<\/h2>\n<p>When we realized that some of our animations might cause annoyance or discomfort to users, we were faced with our first challenge: <strong>Should we keep the animations or remove them altogether?<\/strong> If we remove them, how will we provide feedback to our users? And how will not having animations impact how users understand our products?<\/p>\n<p>We tackled this in several steps:<\/p>\n<ol>\n<li>We organized collaborative sessions with our Digital Accessibility team to gain insights.<\/li>\n<li>We conducted in-depth research on the topic to learn from the experiences and lessons of other teams that have faced similar challenges.<\/li>\n<\/ol>\n<p><strong>Note<\/strong>: <em>If you\u2019re unfamiliar with the Mercado Libre Accessibility Team\u2019s work, I encourage you to read about some of the things they do over at the <a href=\"https:\/\/medium.com\/mercadolibre-tech\/accessibility\/home\">Mercado Libre blog<\/a>.<\/em><\/p>\n<p>We walked away with two specific lessons to keep in mind as we considered more accessible UI animations.<\/p>\n<h3 id=\"lesson-1-animation-motion\">Lesson 1: Animation \u2260 Motion<\/h3>\n<p>During our research, we discovered an important distinction: <strong>Animation is not the same as motion<\/strong>. While all moving elements are animations, not every animated element necessarily involves a motion as far as a change in position.<\/p>\n<p>The Web Content Accessibility Guidelines (WCAG) include three criteria related to motion in interfaces:<\/p>\n<ol>\n<li><strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#pause-stop-hide\">Pause, stop, and hide<\/a><\/strong><br \/>\nAccording to Success Criterion 2.2.2 (Level AA), we ought to allow users to pause, stop, or hide any content that moves, flashes, or scrolls, as well as those that start or update automatically or that last longer than five seconds and is presented in parallel with other content.<\/li>\n<li><strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#seizures-and-physical-reactions\">Moving or flashing elements<\/a><\/strong><br \/>\nSuccess Criterion 2.3 includes guidelines for avoiding seizures and negative physical reactions, including 2.3.1 (Level A) and 2.3.2 (Level AAA) for avoiding intermittent animations that flash more than three times per second as they could trigger seizures.<\/li>\n<li><strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#animation-from-interactions\">Animation from interactions<\/a><\/strong><br \/>\nSuccess Criterion 2.3.3 specifies that users should be able to interact with the UI without solely relying on animations. In other words, the user should be able to stop any type of movement unless the animation is essential for functionality or conveying information.<\/li>\n<\/ol>\n<p>These are principles that we knew we could lean on while figuring out the best approach for using animations in our work.<\/p>\n<h3 id=\"lesson-2-rely-on-reduced-motion-preferences\">Lesson 2: Rely On Reduced Motion Preferences<\/h3>\n<p>Our Digital Accessibility team made sure we are aware of the <code>prefers-reduced-motion<\/code> media query and how it can be used to prevent or limit motion. MacOS, for example, provides a \u201cReduce motion\u201d setting in the System Settings.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/1-macos-reduce-motion-setting.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"564\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot with a MacOS \u201cReduce motion\u201d setting in the System Settings\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/1-macos-reduce-motion-setting.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/1-macos-reduce-motion-setting.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>As long as that setting is enabled and <a href=\"https:\/\/caniuse.com\/prefers-reduced-motion\">the browser supports it<\/a>, we can use <code>prefers-reduced-motion<\/code> to configure animations in a way that respects that preference.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">:root {\n  --animation-duration: 250ms; \n}\n\n@media screen and (prefers-reduced-motion: reduce), (update: slow) {\n  \/* Increase duration to slow animation when a user requests a reduced animation experience *\/\n.animated {\n    --animation-duration: 0 !important; \n  }\n}\n<\/code><\/pre>\n<\/div>\n<p><a href=\"https:\/\/css-tricks.com\/revisiting-prefers-reduced-motion\/#aa-reduce-isnt-necessarily-remove\">Eric Bailey is quick to remind us<\/a> that <em>reduced<\/em> motion is not the same as <em>no<\/em> motion. There are cases where removing animation will prevent the user\u2019s understanding of the content it supports. In these cases, it may be more effective to slow things down rather than remove them completely.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">:root {\n  --animation-duration: 250ms; \n}\n\n@media screen and (prefers-reduced-motion: reduce), (update: slow) {\n  \/* Increase duration to slow animation when reduced animation is preferred *\/\n  * {\n    --animation-duration: 6000ms !important; \n  }\n}\n<\/code><\/pre>\n<\/div>\n<p>Armed with a better understanding that animation doesn\u2019t always mean changing positions and that we have a way to respect a user\u2019s motion preferences, we felt empowered to move to the next phase of our work.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"we-defined-an-action-plan\">We Defined An Action Plan<\/h2>\n<p>When faced with the challenge of integrating reduced motion preferences without significantly impacting our product development and UX teams, we posed a crucial question to ourselves: <em>How can we effectively achieve this without compromising the quality of our products?<\/em><\/p>\n<p>We are well aware that implementing broad changes to a design system is not an easy task, as it subsequently affects all Mercado Libre products. It requires strategic and careful planning. That said, we also embrace a mindset of beta and continuous improvement. After all, how can you improve a product daily without facing new challenges and seeking innovative solutions?<\/p>\n<p>With this perspective in mind, we devised an action plan with clear criteria and actionable steps. Our goal is to seamlessly integrate reduced motion preferences into our products and contribute to the well-being of all our users.<\/p>\n<p>Taking into account the criteria established by the WCAG and the distinction between animation and motion, we classified animations into three distinct groups:<\/p>\n<ol>\n<li>Animations that do not apply to the criteria;<\/li>\n<li>Non-essential animations that can be removed;<\/li>\n<li>Essential animations that can be adapted.<\/li>\n<\/ol>\n<p>Let me walk you through those in more detail.<\/p>\n<h3 id=\"1-animations-that-do-not-meet-the-criteria\">1. Animations That Do Not Meet The Criteria<\/h3>\n<p>We identified animations that do not involve any type of motion and, therefore, do not require any adjustments as they did not pose any triggers for users with vestibular disorders or reduced motion preferences.<\/p>\n<p>Animations in this first group include:<\/p>\n<ul>\n<li>Objects that instantly appear and disappear without transitions;<\/li>\n<li>Elements that transition color or opacity, such as changes in state.<\/li>\n<\/ul>\n<p>A button that changes color on hover is an example of an animation included in this group.<\/p>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/2-button-changes-color-hover.gif\"><img loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"364\" alt=\"Button changing color on mouse hover\" class=\"lazyload\" data-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2023\/11\/3-button-changes-color-hover-800px.gif\"><\/a><figcaption>Button changing color on mouse hover. (<a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/2-button-changes-color-hover.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>As long as we are not applying some sort of radical change on a hover effect like this \u2014 and the colors provide enough contrast for the button label to be legible \u2014 we can safely assume that it is not subject to accessibility guidelines.<\/p>\n<h3 id=\"2-unessential-animations-that-can-be-removed\">2. Unessential Animations That Can Be Removed<\/h3>\n<p>Next, we categorized animations with motions that were unessential for the interface and contrasted them with those that did add context or help navigate the user. We consider unessential animations to be those that are not crucial for understanding the content or state of the interface and that could cause discomfort or distress to some individuals.<\/p>\n<p>This is how we defined animations that are included in this second group:<\/p>\n<ul>\n<li>Animated objects that take up more than one-third of the screen or move across a significant distance;<\/li>\n<li>Elements with autoplay or automatic updates;<\/li>\n<li>Parallax effects, multidirectional movements, or movements along the Z-axis, such as changes in perspective;<\/li>\n<li>Content with flashes or looping animations;<\/li>\n<li>Elements with vortex, scaling, zooming, or blurring effects;<\/li>\n<li>Animated illustrations, such as morphing SVG shapes.<\/li>\n<\/ul>\n<p>These are the animations we decided to <em>completely<\/em> remove when a user has enabled reduced motion preferences since they do not affect the delivery of the content, opting instead for a more accessible and comfortable experience.<\/p>\n<p>Some of this is subjective and takes judgment. There were a few articles and resources that helped us define the scope for this group of animations, and if you\u2019re curious, you can refer to them in the following links:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/uxpamagazine.org\/how-to-make-motion-design-accessible\/\">How to Make Motion Design Accessible<\/a>,\u201d Alik Brundrett<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2020\/09\/design-reduced-motion-sensitivities\/#identifying-potentially-triggering-motion\">Designing With Reduced Motion For Motion Sensitivities<\/a>,\u201d Val Head<\/li>\n<li>\u201c<a href=\"https:\/\/webkit.org\/blog\/7551\/responsive-design-for-motion\/\">Responsive Design for Motion<\/a>,\u201d James Craig<\/li>\n<\/ul>\n<p>For objects that take up more than one-third of the screen or move position across a significant distance, we opted for instant transitions over smooth ones to minimize unnecessary movements. This way, we ensure that crucial information is conveyed to users without causing any discomfort yet still provide an engaging experience in either case.<\/p>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/4-animation-comparison-reduce-motion.gif\"><img loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"333\" alt=\"Comparing a feedback screen with animations that take up more than one-third of the screen versus the same screen with instant animations.\" class=\"lazyload\" data-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2023\/11\/5-animation-comparison-reduce-motion-800px.gif\"><\/a><figcaption>Comparing a feedback screen with animations that take up more than one-third of the screen versus the same screen with instant animations. (<a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/4-animation-comparison-reduce-motion.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>Other examples of animations we completely remove include elements that autoplay, auto-update, or loop infinitely. This might be a video or, more likely, a carousel that transitions between panels. Whatever the case, the purpose of removing movement from animations that are \u201con\u201d by default is that it helps us conform to WCAG Success Criterion 2.2.2 (Level AA) because we give the user absolute control to decide when a transition occurs, such as navigating between carousel panels.<\/p>\n<p>Additionally, we decided to eliminate the horizontal sliding effect from each transition, opting instead for instantaneous changes that do not contribute to additional movement, further preventing the possibility of triggering vestibular disorders.<\/p>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/6-comparison-auto-playing-carousel.gif\"><img loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"333\" alt=\"Comparing an auto-playing carousel with another carousel that incorporates instant changes instead of smooth transitions.\" class=\"lazyload\" data-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2023\/11\/7-comparison-auto-playing-carousel-800px.gif\"><\/a><figcaption>Comparing an auto-playing carousel with another carousel that incorporates instant changes instead of smooth transitions. (<a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/6-comparison-auto-playing-carousel.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>Along these same lines, we decided that parallax effects and any multidirectional movements that involve scaling, zooming, blurring, and vortex effects are also included in this second group of animations that ought to be replaced with instant transitions.<\/p>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/8-comparison-card-flip-animation.gif\"><img loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"333\" alt=\"Comparing a card flip animation with smooth transitions with one that transitions instantly.\" class=\"lazyload\" data-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2023\/11\/9-comparison-card-flip-animation-800px.gif\"><\/a><figcaption>Comparing a card flip animation with smooth transitions with one that transitions instantly. (<a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/8-comparison-card-flip-animation.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>The last type of animation that falls in this category is animated illustrations. Rather than allowing them to change shape as they normally would, we merely display a static version. This way, the image still provides context for users to understand the content without the need for additional movement.<\/p>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/10-comparison-animated-illustration-without-motion.gif\"><img loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"333\" alt=\"Comparing an animated illustration with the same illustration without motion.\" class=\"lazyload\" data-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2023\/11\/11-comparison-animated-illustration-without-motion-800px.gif\"><\/a><figcaption>Comparing an animated illustration with the same illustration without motion. (<a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/10-comparison-animated-illustration-without-motion.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<h3 id=\"3-essential-animations-that-can-be-adapted\">3. Essential Animations That Can Be Adapted<\/h3>\n<p>The third and final category of animations includes ones that are absolutely essential to use and understand the user interface. This could potentially be the trickiest of them all because <strong>there\u2019s a delicate balance to strike between essential animation and maintaining an accessible experience<\/strong>.<\/p>\n<p>That is why we opted to provide alternative animations when the user prefers reduced motion. In many of these cases, it\u2019s merely a matter of adjusting or reducing the animation so that users are still able to understand what is happening on the screen at all times, but without the intensity of the default configuration.<\/p>\n<p>The best way we\u2019ve found to do this is by adjusting the animation in a way that makes it more subtle. For example, adjusting the animation\u2019s duration so that it plays longer and slower is one way to meet the challenge.<\/p>\n<p>The loading indicator in our design system is a perfect case study. Is this animation absolutely necessary? It is, without a doubt, as it gives the user feedback on the interface\u2019s activity. If it were to stop without the interface rendering updates, then the user might interpret it as a page error.<\/p>\n<p>Rather than completely removing the animation, we picked it apart to identify what aspects could pose issues:<\/p>\n<ul>\n<li>It could <em>rotate<\/em> considerably fast.<\/li>\n<li>It constantly changes <em>scale<\/em>.<\/li>\n<li>It runs in an <em>infinite loop<\/em> until it vanishes.<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/12-loading-indicator.gif\"><img loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"364\" alt=\"The loading indicator\" class=\"lazyload\" data-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2023\/11\/13-loading-indicator-800px.gif\"><\/a><figcaption>The loading indicator. (<a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/12-loading-indicator.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>Considering the animation\u2019s importance in this context, we proposed an adaptation of it that meets these requirements:<\/p>\n<ul>\n<li>Reduce the rotation speed.<\/li>\n<li>Eliminate the scaling effect.<\/li>\n<li>Set the maximum duration to five seconds.<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/14-comparison-loading-indicator-reduced-motion.gif\"><img loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"333\" alt=\"Comparing the loading indicator with and without reduced motion preferences enabled.\" class=\"lazyload\" data-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2023\/11\/15-comparison-loading-indicator-reduced-motion-800px.gif\"><\/a><figcaption>Comparing the loading indicator with and without reduced motion preferences enabled. (<a href=\"https:\/\/files.smashing.media\/articles\/creating-accessible-ui-animations\/14-comparison-loading-indicator-reduced-motion.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>The bottom line:<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aAnimation%20can%20be%20necessary%20and%20still%20mindful%20of%20reduced%20motion%20preferences%20at%20the%20same%20time.%0a&amp;url=https:\/\/smashingmagazine.com%2f2023%2f11%2fcreating-accessible-ui-animations%2f\"><\/p>\n<p>Animation can be necessary and still mindful of reduced motion preferences at the same time.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>This is the third and final category we defined to help us guide our decisions when incorporating animation in the user interface, and with this guidance, we were able to tackle the third and final phase of our work.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"we-expanded-it-across-all-our-products\">We Expanded It Across All Our Products<\/h2>\n<p>After gaining a clear understanding of the necessary steps in our execution strategy, we decided to begin integrating the reduced motion preferences we defined in our design system across all our product interfaces. Anyone who manages or maintains a design system knows the challenges that come with it, particularly when it comes to implementing changes organically without placing additional burden on our product teams.<\/p>\n<p>Our approach was rooted in education.<\/p>\n<p>Initially, we focused on documenting the design system, creating a centralized and easily accessible resource that offered comprehensive information on accessibility for animations. Our focus was on educating and fostering empathy among all our teams regarding the significance of reduced motion preferences. We delved into the criteria related to motion, how to achieve it, and, most importantly, explaining how our users benefit from it.<\/p>\n<p>We also addressed technical aspects, such as when the design system automatically adapts to these preferences and when the onus shifts to the product teams to tailor their experiences while proposing and implementing animations in their projects. Subsequently, we initiated a training and awareness campaign, commencing with a series of company-wide presentations and the creation of accessibility articles like the one you\u2019re reading now!<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>Our design system is the ideal platform to apply global features and promote a culture of teamwork and consistency in experiences, especially when it comes to accessibility. Don\u2019t you agree?<\/p>\n<p>We are now actively working to ensure that whenever our products detect the default motion settings on our users\u2019 devices, they automatically adapt to their needs, thus providing enhanced value in their experiences.<\/p>\n<p>How about you? Are you adding value to the user experience of your interfaces with accessible animation? If so, what principles or best practices are you using to guide your decisions, and how is it working for you? Please share in the comments so we can compare notes.<\/p>\n<div class=\"signature\">\n  <img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Creating Accessible UI Animations Creating Accessible UI Animations Oriana Garc\u00eda 2023-11-10T10:00:00+00:00 2024-05-01T16:05:07+00:00 Ever since I started practicing user interface design, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":3,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":291,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/281\/revisions\/291"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media\/283"}],"wp:attachment":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}