ArcGIS Maps SDK for JavaScript

Supporting Reduced Motion: Enhancing Accessibility in Web Apps

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.

We’ll 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.

Why supporting reduced motion preference is important

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.

Some benefits in supporting reduced motion preference include:

  1. Minimizing motion sensitivity and seizure risk: 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 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.
  2. Improving user experience: 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.
  3. Adopting accessibility standards: Various 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 web content is accessible to a broader audience.

Reduced motion support in 2D maps

As of version 4.30 (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(), or with components or widgets such as Search and Bookmarks. Additionally, panning momentum will also be disabled.

ArcGIS Online apps

Since June 2024, ArcGIS Online apps using the JavaScript Maps SDK version 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.

Default animations

Warning: Playing the default animations video could impact viewers with vestibular motion disorders or individuals prone to motion sickness.

A web mapping application with default animations using JavaScript Maps SDK version 4.30 and Calcite version 2.8.5. The loader, bookmarks, and map navigation animations are enabled in the application.

Reduced motion support

A web mapping application with reduced animations using JavaScript Maps SDK version 4.30 and Calcite version 2.8.5. Animations are reduced with the loader and removed from the bookmarks, zoom, and map navigation.

App developers can decide whether or not 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’s reduced motion preference (if any).

How to build reduced motion support into your applications

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:

Detect user preference

Browsers support the prefers-reduced-motion media query, which allows you to detect if a user has requested reduced motion in their operating system settings.

The CSS @media query can be used to detect a preference for reduced motion, and allows you to apply specific CSS rules, as shown in the snippet below.

@media (prefers-reduced-motion: reduce) {
  /* CSS rules for reduced motion */
}

Similarly, the matchMedia method in JavaScript allows you to check for the prefers-reduced-motion media query and update your application accordingly.

const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;

Join us at the 2024 Esri User Conference

The 2024 Esri User Conference titled GIS – Uniting Our World is Monday, July 15 through Friday, July 19, 2024 in San Diego, California. This year’s conference features six accessibility offerings ranging from desktop and web accessibility, and includes user presentations.

Tuesday, July 16:

Wednesday, July 17:

Thursday, July 18:

2024 Esri User Conference logo banner

Further exploration

Web accessibility is a consistently evolving topic and it can be challenging to know what the best solution can be for your app. It is important to continually evaluate the accessibility of your content and find ways to improve experiences for your users.

Curious to learn more about animations and accessibility in your apps? Navigate to some additional accessibility resources, including:

About the authors

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’s 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.

Connect:

Passionate about web map accessibility and bringing the web and maps to wider audiences. A senior product engineer with Calcite Design System. Enjoys exploring Minnesota's wilderness and has a goal to visit every major league baseball stadium across America.

Connect:
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

Next Article

Generative AI in Urban Planning

Read this article