{"id":734862,"date":"2025-02-10T13:09:06","date_gmt":"2025-02-10T21:09:06","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&#038;p=734862"},"modified":"2025-02-10T13:09:06","modified_gmt":"2025-02-10T21:09:06","slug":"enhance-accessibility-in-web-apps-with-reduced-motion","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion","title":{"rendered":"Enhance Accessibility in Web Apps with Reduced Motion"},"author":5752,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[25002],"tags":[287782,485662,491602,290052],"arcuser_issues":[491442],"class_list":["post-734862","arcuser","type-arcuser","status-publish","format-standard","hentry","category-developers-corner","tag-accessibility","tag-arcgis-maps-sdk-for-javascript","tag-reduced-motion","tag-web-apps","arcuser_issues-winter-2025"],"acf":{"short_description":"Honoring user preference for reduced motion is an important part of creating accessible web applications.","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Creating accessible web applications is not just about complying with legal standards; it\u2019s about creating an inclusive digital environment where all users can interact comfortably. One important aspect of this is honoring user preference for reduced motion, which prevents animations from being displayed.\r\n\r\nIn this article, we\u2019ll explore why supporting reduced-motion preference is important, how it is supported within ArcGIS Maps SDK for JavaScript, and how you can integrate reduced-motion support into your applications."},{"acf_fc_layout":"content","content":"<h2>Why Supporting Reduced-Motion Preference Is Important<\/h2>\r\nAnimations aren\u2019t for everyone, and some users can experience discomfort or adverse health effects when presented with certain types of motion. Supporting user preference for reduced motion ensures that you are creating an environment where more users can have a pleasant experience.\r\n\r\nBenefits of supporting reduced-motion preference include:\r\n<ul>\r\n \t<li>Minimizing motion sensitivity and seizure risk\u2014As mentioned, some users experience discomfort or adverse health effects, such as dizziness, nausea, or headaches, due to motion animations on web pages, such as a sliding panel. This is particularly prevalent among those with vestibular motion disorders or individuals prone to motion sickness. Other types of animations, like rapid flashes or high-contrast movements, can trigger seizures in people with photosensitive epilepsy.<\/li>\r\n \t<li>Improving user experience\u2014Providing options for reduced motion ensures that more users, regardless of physical condition, can have a pleasant experience using your apps. Users will feel more comfortable and in control if they can adjust the settings to match their needs and preferences.<\/li>\r\n \t<li>Adopting accessibility standards\u2014Various accessibility standards and guidelines, such as the Web Content Accessibility Guidelines (WCAG) Success Criterion 2.3.3: Animation from Interactions, advocate for reduced-motion preference to ensure that web content is accessible to a broader audience.<\/li>\r\n<\/ul>"},{"acf_fc_layout":"content","content":"<h2>Reduced-Motion Support in 2D Maps<\/h2>\r\nAs of version 4.30, released in June 2024, ArcGIS Maps SDK for JavaScript supports reduced-motion preference in 2D MapView displays. When users have enabled reduced motion or disabled animations in the operating system or browser, animations will be removed when navigating the map using MapView.goTo(), or with components or widgets such as Search and Bookmarks. Additionally, panning momentum will also be disabled.\r\n\r\nSince June 2024, ArcGIS Online apps using JavaScript Maps SDK 4.30 also inherit reduced-motion support for 2D maps, which include Map Viewer, ArcGIS Instant Apps, ArcGIS Dashboards, ArcGIS StoryMaps, and ArcGIS Experience Builder.\r\n\r\nApp developers can decide whether their app honors reduced-motion preference with the config.respectPrefersReducedMotion setting. While this option is available, it is not recommended unless your application requires animation. The implied setting is true, meaning that the SDK, by default, will honor the user\u2019s reduced-motion preference (if any)."},{"acf_fc_layout":"content","content":"<h2>How to Build Reduced-Motion Support into Your Applications<\/h2>\r\nWhile we have built support for reduced motion into JavaScript Maps SDK, you can take additional steps to support it in your apps:\r\n<ul>\r\n \t<li>Remove nonessential animations.<\/li>\r\n \t<li>Add a play\/pause button to give users control over animations.<\/li>\r\n \t<li>For animations that add context or meaning, consider minimizing the motion using the prefers-reduced-motion media query.<\/li>\r\n<\/ul>\r\nBrowsers support the prefers-reduced-motion media query, which allows you to detect if a user has requested reduced motion in their operating system settings.\r\n\r\nThe CSS @media query can be used to detect a preference for reduced motion, and allows you to apply specific CSS rules, as shown in Listing 1."},{"acf_fc_layout":"image","image":734872,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Similarly, the matchMedia method in JavaScript allows you to check for the prefers-reduced-motion media query and update your application accordingly, as shown in Listing 2."},{"acf_fc_layout":"image","image":734882,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Web accessibility is a consistently evolving topic and it can be challenging to know what the best solution is for your app. It is important to continually evaluate the accessibility of your content and find ways to improve experiences for users. For additional information on what you can do to improve accessibility, visit <a href=\"https:\/\/www.esri.com\/en-us\/accessibility\/resources\">Esri's Accessibility Resources site<\/a>."}],"references":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Enhance Accessibility in Web Apps with Reduced Motion | Winter 2025 | ArcUser<\/title>\n<meta name=\"description\" content=\"Honoring user preference for reduced motion is an important part of creating accessible web applications.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enhance Accessibility in Web Apps with Reduced Motion | Winter 2025 | ArcUser\" \/>\n<meta property=\"og:description\" content=\"Honoring user preference for reduced motion is an important part of creating accessible web applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/02\/arcuser-banner-enhanceaccess-wide.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Enhance Accessibility in Web Apps with Reduced Motion | Winter 2025 | ArcUser\" \/>\n<meta name=\"twitter:description\" content=\"Honoring user preference for reduced motion is an important part of creating accessible web applications.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/02\/arcuser-banner-enhanceaccess-wide.jpg\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion\",\n\t            \"name\": \"Enhance Accessibility in Web Apps with Reduced Motion | Winter 2025 | ArcUser\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t            },\n\t            \"datePublished\": \"2025-02-10T21:09:06+00:00\",\n\t            \"description\": \"Honoring user preference for reduced motion is an important part of creating accessible web applications.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Enhance Accessibility in Web Apps with Reduced Motion\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t            \"name\": \"Esri\",\n\t            \"description\": \"Esri Newsroom\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/41c803b2ea8734c36f9c4e9586d1449d\",\n\t            \"name\": \"Amy Ambard\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g\",\n\t                \"contentUrl\": \"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g\",\n\t                \"caption\": \"Amy Ambard\"\n\t            },\n\t            \"url\": \"\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Enhance Accessibility in Web Apps with Reduced Motion | Winter 2025 | ArcUser","description":"Honoring user preference for reduced motion is an important part of creating accessible web applications.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion","og_locale":"en_US","og_type":"article","og_title":"Enhance Accessibility in Web Apps with Reduced Motion | Winter 2025 | ArcUser","og_description":"Honoring user preference for reduced motion is an important part of creating accessible web applications.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/02\/arcuser-banner-enhanceaccess-wide.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_title":"Enhance Accessibility in Web Apps with Reduced Motion | Winter 2025 | ArcUser","twitter_description":"Honoring user preference for reduced motion is an important part of creating accessible web applications.","twitter_image":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/02\/arcuser-banner-enhanceaccess-wide.jpg","twitter_site":"@Esri","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion","url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion","name":"Enhance Accessibility in Web Apps with Reduced Motion | Winter 2025 | ArcUser","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2025-02-10T21:09:06+00:00","description":"Honoring user preference for reduced motion is an important part of creating accessible web applications.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/enhance-accessibility-in-web-apps-with-reduced-motion#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"Enhance Accessibility in Web Apps with Reduced Motion"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/41c803b2ea8734c36f9c4e9586d1449d","name":"Amy Ambard","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g","caption":"Amy Ambard"},"url":""}]}},"sort_order":"15","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/734862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcuser"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/5752"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/734862\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=734862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=734862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=734862"},{"taxonomy":"arcuser_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser_issues?post=734862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}