Accessibility

The ArcGIS Maps SDK for JavaScript leverages the W3C Accessibility Standards to ensure the applications and experiences you create are usable by a wide range of audiences. We plan to continue to improve accessibility with each release.

Apps created with the ArcGIS Maps SDK for JavaScript support keyboard navigation, alternative text, color contrast in dark and light themes, reduced motion preferences, semantic structure, and additional design and feature considerations. This enables developers to create apps that are accessible to a broader audience as they take advantage of these capabilities.

While JavaScript Maps SDK and Calcite Design System are created with accessibility in mind, there are additional steps you can take to ensure a diverse audience can navigate, understand, and use the solutions you build. For accessibility best practices, visit Accessibility - Calcite Design System.

Keyboard navigation is supported in both 2D and 3D.

Reduced motion

To accommodate users with vestibular motion disorders or individuals who prefer less animation in their applications, the prefers-reduced-motion media query is supported in 2D MapViews.

When users have enabled reduced motion or no animations in the operating system or browser, animations will be reduced in the following instances:

During map navigation with MapView.goTo()
When navigating the map via widgets such as Search and Bookmarks
When panning the map, the momentum feature, which typically allows the MapView to continue slight movement after the mouse pointer has been lifted, will be disabled

Additionally, widgets and ArcGIS Maps SDK for JavaScript components built with Calcite Design System adapt to reduced motion by reducing the speed of certain animations, such as during widget loading.

Implementing reduced motion in your applications

When designing apps with reduced motion in mind, consider the following guidelines:

Provide the user the ability to control animations, for instance, by incorporating a play and pause button.
If the animations do not enhance context or meaning, it is recommended to remove the animations.
If the animation does contribute to the app's context or meaning, aim to minimize the motion while still effectively conveying the message.

To determine if a user has enabled reduced motion on their operating system or browser, use the following code snippet to adjust your app's animations accordingly:

Use dark colors for code blocksCopy
const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;

Color

When designing apps with color in mind, some considerations include:

To showcase your data, you can switch between dark and light themes.
Smaller fonts need larger contrast. For example, a contrast ratio of at least 4.5:1, while a larger text only need a contrast ratio of 3:1.
Data-driven styles for visualization, Smart Mapping, checks if your basemap is dark or light colored.
Default colors used in popup charts meet WCAG's Success Criterion 1.4.3 for color contrast ratio in both light and dark themes. Symbology can be set with these colors by using the "Olympic Sunset" color ramp.
Change the default view theme used by several widgets and tools.

Language

Set the page locale to help assistive technologies know how to read it:

<html lang="sv">

or dynamically:

document.documentElement.lang = "sv"; // Swedish

Localize the strings used by the Maps SDK in your app:

intl.setLocale("ja"); // Japanese

Resources

For additional accessibility best practices, visit Accessibility - Calcite Design System.

For more information about Esri's commitment to accessible technology, visit Esri Accessibility. For legal information about accessibility, visit Esri Legal Accessibility.