{"id":2419122,"date":"2024-07-09T09:00:33","date_gmt":"2024-07-09T16:00:33","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2419122"},"modified":"2024-10-24T15:16:23","modified_gmt":"2024-10-24T22:16:23","slug":"supporting-reduced-motion-enhancing-accessibility-in-web-apps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/supporting-reduced-motion-enhancing-accessibility-in-web-apps","title":{"rendered":"Supporting Reduced Motion: Enhancing Accessibility in Web Apps"},"author":10062,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[28911,42641,38851],"industry":[],"product":[36831],"class_list":["post-2419122","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-accessibility","tag-arcgis-online","tag-developers","product-js-api-arcgis"],"acf":{"authors":[{"ID":10062,"user_firstname":"Anne","user_lastname":"Fitz","nickname":"Anne Fitz","user_nicename":"afitz","display_name":"Anne Fitz","user_email":"afitz@esri.com","user_url":"","user_registered":"2019-10-15 00:07:57","user_description":"Anne Fitz is a Senior Product Engineer at Esri, working on the ArcGIS Maps SDK for JavaScript and ArcGIS Arcade. Her expertise primarily focuses on dynamic vector symbology (CIM symbols), data visualization, animation, ArcGIS Arcade integration, and widgets. Anne\u2019s primary goal is to help developers succeed in building geospatial applications, providing them with the tools and knowledge they need to bring their ideas to life. She has been with Esri for over five years.","user_avatar":""},{"ID":309572,"user_firstname":"Kitty","user_lastname":"Hurley","nickname":"Kitty Hurley","user_nicename":"khurley","display_name":"Kitty Hurley","user_email":"khurley@esri.com","user_url":"https:\/\/www.github.com\/geospatialem","user_registered":"2022-05-04 21:30:59","user_description":"Kitty is a Principal Product Engineer with Calcite Design System, passionate about expanding access to the web and maps for broader audiences. She is dedicated to creating inclusive, user-friendly web experiences that connect people and places through innovative design and technology. Outside of work, Kitty enjoys exploring the wilderness of Minnesota and has a goal to visit every major league baseball stadium across America.","user_avatar":""}],"short_description":"Learn how JavaScript Maps SDK supports reduced motion preference in 2D maps allowing you to build accessible web apps to reach wider audiences.","flexible_content":[{"acf_fc_layout":"image","image":{"ID":2427872,"id":2427872,"title":"Screenshot 2024-07-08 at 12.00.26\u202fPM","filename":"Screenshot-2024-07-08-at-12.00.26\u202fPM.png","filesize":2938599,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Screenshot-2024-07-08-at-12.00.26\u202fPM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/supporting-reduced-motion-enhancing-accessibility-in-web-apps\/screenshot-2024-07-08-at-12-00-26-pm","alt":"Map zoomed into Los Angeles showcasing the city's parks and trails.","author":"10062","description":"","caption":"","name":"screenshot-2024-07-08-at-12-00-26-pm","status":"inherit","uploaded_to":2419122,"date":"2024-07-08 19:01:33","modified":"2024-10-24 22:15:57","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Screenshot-2024-07-08-at-12.00.26\u202fPM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Screenshot-2024-07-08-at-12.00.26\u202fPM.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Screenshot-2024-07-08-at-12.00.26\u202fPM.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Screenshot-2024-07-08-at-12.00.26\u202fPM.png","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Screenshot-2024-07-08-at-12.00.26\u202fPM-1536x864.png","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Screenshot-2024-07-08-at-12.00.26\u202fPM.png","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Screenshot-2024-07-08-at-12.00.26\u202fPM-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Screenshot-2024-07-08-at-12.00.26\u202fPM.png","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Creating accessible web applications is not just about complying with legal standards; it’s about creating an inclusive digital environment where all users can interact comfortably. One important aspect of this is honoring user preference for reduced motion<\/a>.<\/p>\n

We’ll explore why supporting reduced motion preference is important, how it is supported within ArcGIS Maps SDK for JavaScript<\/a>, and how you can integrate reduced motion support into your applications.<\/p>\n"},{"acf_fc_layout":"content","content":"

Why supporting reduced motion preference is important<\/h2>\n

Animations aren’t for everyone, and some users can experience discomfort or adverse health effects with certain types of motion. Supporting user preference for reduced motion ensures you are creating an environment where more users can have a pleasant experience.<\/p>\n

Some benefits in supporting reduced motion preference include:<\/p>\n

    \n
  1. Minimizing motion sensitivity and seizure risk:<\/strong> As 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<\/a> or individuals prone to motion sickness. Other types of animations, like rapid flashing or high-contrast movements, can trigger seizures in people with photosensitive epilepsy.<\/li>\n
  2. Improving user experience<\/strong>:<\/strong> Providing options for reduced motion ensures more users, regardless of their physical conditions, can have a pleasant experience in your apps. Users will feel more comfortable and in control if they can adjust the settings to match their needs and preferences.<\/li>\n
  3. Adopting accessibility standards: <\/strong>Various accessibility standards and guidelines, such as the Web Content Accessibility Guidelines (WCAG) Success Criterion 2.3.3: Animation from interactions<\/a>, advocate for reduced motion preference to ensure web content is accessible to a broader audience.<\/li>\n<\/ol>\n"},{"acf_fc_layout":"content","content":"

    Reduced motion support in 2D maps<\/h2>\n

    As of version 4.30<\/a> (June 2024), the JavaScript Maps SDK supports reduced motion preference in 2D MapViews. 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()<\/a>, or with components or widgets such as\u00a0Search<\/a>\u00a0and\u00a0Bookmarks<\/a>. Additionally, panning\u00a0momentum<\/a>\u00a0will also be disabled.<\/p>\n"},{"acf_fc_layout":"content","content":"

    ArcGIS Online apps<\/h3>\n

    Since June 2024, ArcGIS Online apps<\/a> using the JavaScript Maps SDK version 4.30 also inherit reduced motion support for 2D maps, which include Map Viewer<\/a>, ArcGIS Instant Apps<\/a>, ArcGIS Dashboards<\/a>, ArcGIS StoryMaps<\/a>, and ArcGIS Experience Builder<\/a>.<\/p>\n

    Default animations<\/h3>\n"},{"acf_fc_layout":"blockquote","content":"

    Warning: Playing the default animations video could impact viewers with vestibular motion disorders or individuals prone to motion sickness.<\/p>\n"},{"acf_fc_layout":"content","content":"

    A web mapping application with default animations using JavaScript Maps SDK version 4.30<\/a> and Calcite version 2.8.5<\/a>. The loader<\/a>, bookmarks<\/a>, and map navigation<\/a> animations are enabled in the application.<\/em><\/p>\n"},{"acf_fc_layout":"content","content":"

    Reduced motion support<\/h3>\n

    A web mapping application with reduced animations using JavaScript Maps SDK version 4.30<\/a> and Calcite version 2.8.5<\/a>. Animations are reduced with the loader<\/a> and removed from the bookmarks, zoom, and map navigation<\/a>.<\/em><\/p>\n

    App developers can decide whether or not their app honors reduced motion preference with the config.respectPrefersReducedMotion<\/code><\/a>\u00a0setting. While this option is available, it is not recommended unless your application\u00a0requires<\/em> animation. The implied setting is true<\/code> meaning that the SDK, by default, will honor the user’s reduced motion preference (if any).<\/p>\n"},{"acf_fc_layout":"content","content":"

    How to build reduced motion support into your applications<\/h2>\n

    While we have built support for reduced motion into JavaScript Maps SDK, there are additional steps you can take to support reduced motion preference in your apps. For instance:<\/p>\n