ArcGIS Instant Apps enables creators to rapidly build interactive web mapping applications without needing to write code. These apps are designed to be accessible to all users. For more on the accessibility features available in Instant Apps, visit the ArcGIS Blog on enhancing web app accessibility.

This guide outlines advanced techniques for improving the accessibility of Instant Apps through HTML and CSS customizations within the app’s configuration settings.

---

Adding Alt Text to Images in Rich Text Editors

Including alternative (alt) text for images is a key accessibility best practice, particularly for users who rely on screen readers. Alt text should clearly describe the image and explain its function or relevance.

When using a rich text editor—such as when configuring an Introduction panel—you can edit the HTML by clicking the Source button. Insert the alt attribute directly into the image tag to provide descriptive text. For example:

htmlCopyEdit<p style="text-align:center">
  <img src="https://images.unsplash.com/photo-1625179893310-8e419f979608?q=80&amp;w=3540&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
       alt="Image of a plant sprouting from dirt" 
       width="500" 
       height="400">
</p>

This ensures that screen readers can interpret the image meaningfully.

---

Customizing Keyboard Focus Indicators with CSS

Instant Apps provides preset themes and supports custom theme colors. A built-in contrast checker helps maintain visual clarity for users with vision impairments. However, you may wish to adjust the keyboard focus indicator color to improve visibility with your chosen theme.

To do this, use the Custom CSS option in the theme settings. Add the following CSS to update the focus color for interactive elements and the map view:

cssCopyEdit.calcite-mode-dark {
  --calcite-color-focus: yellow;
}

.esri-view {
  --esri-view-outline-color: yellow;
}

Make sure the new focus color maintains sufficient contrast with other visual elements. For more tips on color accessibility, see the blog on designing for users with color vision deficiencies.

---

Additional Resources

Explore the sample Sidebar app referenced in this post to see these accessibility enhancements in action. To learn more about ArcGIS Instant Apps, visit the Instant Apps resources page.

Esri is dedicated to building inclusive, accessible products that align with the latest accessibility standards and are compatible with assistive technologies. Visit Esri’s Accessibility page for detailed information, product conformance reports, and helpful resources.

DISCLAIMER: This Article was written by Krista McPherson