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.

ARIA Support

To improve screen reader support, the SDK provides ARIA attributes on Map and Scene components, as well as on MapView and SceneView, through the aria property, which supports the following properties:

label – a concise accessible name for the view container
description – a more detailed accessible description of the view container
labelledByElements – an array of HTML elements whose text are combined to provide the accessible name of the view container
describedByElements – an array of HTML elements whose text are combined to provide the accessible description of the view container

The view container for the Map or Scene has an ARIA role of application. This role indicates that the area provides a rich, interactive experience. It’s important for this element to have an accessible name — either through the label or labelledByElements property — so that screen reader users don’t only hear “application,” which provides little context. Including a description, or linking to one with describedByElements, can further help users understand the map’s purpose or content.

These attributes help make applications more inclusive by ensuring the view container is properly named and described for assistive technologies.

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.

Controlling animations with MapView and Map component

Developers can explicitly control animations in 2D views using:

The animationsEnabled property on MapView
The animationsDisabled property on the Map component

These settings affect all animations in a 2D view, including symbols, renderers, layers, and navigation. They can be used in combination with the CSS prefers-reduced-motion media query to create accessible applications that respect users’ motion preferences.

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 modes.
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.