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

Presented at the 2023 Esri Developer Summit by Kelly Hutchins and Kitty Hurley on Tuesday, March 7, 2023 in Palm Springs, California.

• Demo site
• Code
• Slides (opens in a new window)

JS Maps SDK Demos

• Prefers reduced motion: Disable animation when prefers-reduced-motion is active.
• Search focus: Handle focus switch between the search and the search results popup.
• Focus popup on open: Use the shouldFocus option on Popup.open.
• Map description: Add a description to the map using aria-describedby.
• Basemap color: Detect basemap theme or color using getBasemapBackground and getBasemapColor and use the value to style custom graphics to have appropriate color contrast.
• Table: Add an option to open the layer data in a table and optionally export to csv.
• High contrast basemap with BasemapToggle: Toggle between the light and dark high contrast basemaps using the BasemapToggle widget.
• Map navigation Demonstrate one option for navigating map data via the keyboard. Also shows how to use ARIA live regions to update assistive technology about dynamic changes.

Calcite Demos

• Contrast (Enhanced) with Calcite: Provide Web Content Accessibility Guidelines (WCAG) Level AAA enhanced contrast to your Calcite apps.
• Dynamically add an external link icon to Calcite Links: Dynamically add context to assistive technologies and an accompanying Calcite Icon.
• Reduced motion support with Calcite Loader: Calcite disables animation when system animations are disabled.
• High Contrast with Calcite Dropdown: Calcite enables high contrast colors when enabled on the system.
• Apply core concepts tutorial: Tutorial showcased with Color Oracle tool.

Resources

• Codepen collections
  • https://codepen.io/collection/WvMEJM
  • https://codepen.io/collection/BNzmVw
• Calcite and accessibility
• Subscribe to the Esri accessibility community