Building Accessible Web Apps with ArcGIS Maps SDK for JavaScript and Calcite

Presented at the 2026 Esri Developer Summit by Kelly Hutchins and Kitty Hurley in Palm Springs, California on Wednesday, March 11.

• Demo Site
• Code
• Slides, opens in a new window

Demos

1. Map Description and Live Regions
   • Provide context as to when the map has loaded and include a description when the map is in focus to further WCAG’s 1.3.1: Info and Relationships Success Criterion.
2. Visual Scale
   • Demonstrates how to use the visualScale property to increase the size of map UI controls, including Expand, Zoom, and Home.
3. Expand Component
   • Demonstrates Expand behavior with focus trap handling using focus-trap-disabled and close-on-esc-disabled.
   • Shows explicit focus management between Search and Popup: focus moves to the popup after search completes, then returns to Search when the popup closes.
   • Supports both the default locator and a layer-based search source in the web map, including census tract search with keyboard access to popup details.
4. Reduced Motion
   • Shows how map animations can respect the user’s motion preference.
   • Includes controls to explicitly play or pause animation.
   • Note: disabling animation affects all animation, including goTo zoom transitions.
5. High Contrast
   • Note: requires an API token, the current token expires on April 1, 2026
   • Showcase high-contrast basemaps and Calcite theming to improve perceivability for users with low vision in line with WCAG’s 1.4.3: Contrast (Minimum) Success Criterion.
6. Consistent focus
   • Provide a visible focus and consistent navigation throughout an application via keyboard.
7. Feature Panel
   • Uses the arcgis-feature component to display features in the current map extent within a side panel, with keyboard-accessible navigation through feature results.

Run locally

These demos use JavaScript modules (including shared files in demos/shared), so they must be served over http://. Opening index.html files directly with file:// may fail.

Option 1: Node (no install)

1. Open a terminal in the repository root.

2. Start a local server:

   npx serve .
   

3. Open a demo in your browser, for example:

   http://localhost:3000/demos/features-panel/index.html
   

Option 2: Node http-server

npx http-server -p 8080 .

Then open:

http://localhost:8080/demos/expand-component/index.html

Resources

• Calcite Accessibility
• ArcGIS Maps SDK for JavaScript accessibility
• Subscribe to the Esri accessibility community

This site is open source. Improve this page.