Advanced Workflows for Building Accessible Instant Apps

ArcGIS Instant Apps allows app authors to quickly create interactive mapping applications that strive to be accessible to all audiences with a no-code configuration. For more information about Instant Apps accessibility features, see Enhance web app accessibility with Instant Apps on ArcGIS Blog.

This article introduces workflows for building accessible web apps with Instant Apps that utilize HTML and CSS customization available within the app configuration.

Add alt text to images using HTML in rich text editors

Adding alternative (alt) text to images is an important step towards making your app accessible to screen reader users. When authoring alt text, provide both descriptive information about and the purpose of the image. When authoring supplemental information for your app using a rich text editor, for instance when setting up an Introduction window, you can access the HTML for the text box by clicking on the Source button. After the image source information, add the ‘alt’ tag with the alternative text for the image:

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

Change keyboard focus indicator color with custom CSS

Instant Apps includes preset theme color options and the ability to set custom theme colors with a built-in color contrast checker to ensure legible text for users with visual impairments. You may want to change the focus indicator color to more effectively contrast with your custom theme.

Using the custom CSS option in the theme settings of your app, you can add the following code to change the focus color for interactive elements in the app and the map view:

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

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

Remember to verify the color contrast of your focus color with other graphic elements in the app, see this blog on designing to support users with color vision deficiency for more tips and tricks. For more information on theming Calcite components, see the Calcite Design System Colors and theming documentation.

Resources

You can try out the sample Sidebar app referenced throughout this blog. For more information about Instant Apps, please see the Instant Apps resources page.

Esri is committed to creating accessible products and services compatible with the latest assistive technologies that conform to current software accessibility standards and guidelines. See Esri’s Accessibility site for more information on our accessibility efforts, links to product conformance reports, and other accessibility resources.